标签: angular4-forms

我有一个角度项目，其中使用 PrimeNG 复选框组件，但当我尝试将复选框的默认值设置为选中时出现问题。我什至尝试过绑定[checked]属性，但我猜 p-checkbox 不知道它。

HTML 文件

<p-checkbox name="checkboxName" [(ngModel)]="checked" 
binary="true" label="Perform Notifications"></p-checkbox>

{{checked}}

组件文件

export class XYZ{
checked: boolean = true;
}

加载后，我可以在 HTML 页面中看到下面选中的变量的值为“true”，但复选框为空或未选中。

我正在尝试在供应商表中添加一个新条目。该表还有另一个与之链接的表，其中存储了与每个供应商的合同。所需的功能是以相同的形式提交新供应商和合同的数据，但我无法使其工作。

我可以通过以另一种形式单独上传文件来添加新供应商并在合同之后，但不能在同一个提交操作中。

我怎样才能做到这一点？

我的表格是这样的：

<form class="form-material m-t-40" enctype="multipart/form-data">

    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="denumire" class="label-has-danger"> Denumire furnizor </label></h4>
        <input type="text" id="denumire" name="denumire" class="form-control" placeholder="Denumire" [(ngModel)]="furnizor.denumire" #denumire="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-danger"> Cod intern furnizor </label></h4>
        <input type="text" id="cod" name="cod" class="form-control" placeholder="Cod intern" [(ngModel)]="furnizor.cod" #cod="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="cod" class="label-has-success"> Cod de inregistrare fiscala furnizor </label></h4>
        <input type="text" id="codIntern" name="codIntern" class="form-control" placeholder="Cod" [(ngModel)]="furnizor.codIntern" #codIntern="ngModel">
    </div>
    <div class="form-group has-warning">
        <h4 class="entity-info"><label for="adresa" class="label-has-success"> Adresa </label></h4>
        <input …

可能看起来像是一种奇怪的形式，但出于此处的问题，我将其简化了，这不是我的实际形式。但是，这里发生了相同的情况。

<form (ngSubmit)="submit(form)" #form="ngForm">
    <div>
        Full name:
        <input name="fullName" required>
    </div>
    <div>
        Would you like to receive birthday gifts from us?
        <input type="checkbox" name="gifts" [(ngModel)]="isAddressEditable">
    </div>
    <div>
        Gift shipping address:
        <input name="giftAddress" required [disabled]="!isAddressEditable"> // false (disabled) by default
    </div>

    <button type="submit" [disabled]="form.invalid">Register now!</button>
</form>

因此，我们有一个包含三个字段的模板驱动表单。“立即注册！” 只要表格无效，该按钮将被禁用。

问题是，只要禁用了“礼品送货地址”字段，它就不会计入表单验证中，并且只需填写全名即可使表单有效。

一旦我勾选了该复选框（“您想从我们这里收到生日礼物吗？”），该输入将不再被禁用，因此需要进行验证。

我不确定这是否是设计的行为，但我想知道是否还有一种方法可以对禁用字段也应用验证。

我正在研究Angular 4项目.我需要检测表单控件数组的更改.例如,我有一个名为providers的表单控件数组,如何检测其更改？

export class CustomFormArray {
 public form: FormGroup;

 constructor(private _fb: FormBuilder) {
      this.form = _fb.group({
           providers: _fb.array([])
      });
  }
} 

我有一个多步骤表单，其中用户来回遍历表单。我将表单数据保存在服务中，当他回来时，我使用patchvalue将所有数据打补丁成表单。我也尝试了setvalue，但是表单字段没有被标记为脏的或被触摸的。我如何将已更新的字段标记为脏的？

this.formBuilder.pathValue(formData);

我正在尝试以 Angular 2+ 反应形式验证出生日期。当所选DOB日期超过100岁时，我想显示错误消息。

前端侧

 <div [ngClass]="setClassDOB()">
 <input class="form-control" type="date"name="dob"formControlName="dob" placeholder="DOB">
 </div>

如果我使用模板驱动的表单，我可以将 FormControl 的引用注入到“错误消息”组件中。请注意 ngModel 指令的使用（请参阅本教程）。

<input type="text" name="myFormControl" #myFormControl="ngModel" ngModel />
<error-message [control]="myFormControl" key="foo.bar" />

这几乎适用于反应式表单（我必须使用 formControlName 指令，但我不能使用 ngModel 的东西）。

<input type="text" formControlName="myFormControl" #myFormControl />
<error-message [control]="myFormControl" key="foo.bar" />

“错误消息”组件正确接收 FormControl（this.control 已设置）但 this.control.valueChanges 未定义，我无法注册更改事件侦听器。

有谁知道一种将 FormControl 引用传递给具有响应式表单的子项的方法，以便我可以注册 valueChange 侦听器？我想缺少的是这个 ngModel 的东西，但我不知道如何以反应形式传递它。

@Component({
    selector: 'error-message',
    ...
})
export class ErrorMessageComponent implements OnInit {
    @Input()
    private control: AbstractControl;
    @Input()
    private path: String;

    ngOnInit() {
        this.control.valueChanges.subscribe(() => hideErrorMessage());
    }
    ...
}

更多背景信息：表单数据的验证逻辑专门在我的应用程序后端实现。验证错误作为简单的映射条目发送。每个键等于数据模型的一个字段的路径。我编写了一个“错误消息”组件，它将这样一个键作为参数并订阅某些服务，以便它可以在发生验证错误时接收验证错误。我希望这个组件还保留对其父级（即 FormControl）的引用，以便在发生错误时更新其样式，并在用户更改他放入 FormControl 的内容时重置错误消息。

我们想要解耦事物，以便父级对其子级（“错误消息”组件）一无所知。

我的表单是一个使用 FormBuilder 构建的简单反应式表单。

... …

我正在阅读 angular.io 的文档（反应形式是同步的），试图理解反应形式（它们是如何同步的，模板驱动的形式是如何异步的）。

但是文档对 example 没有足够的解释。谁能帮我理解模板驱动的表单是如何异步的，反应式表单是如何同步的？

我试图在互联网上浏览很多博客，但没有得到答案。

任何帮助表示赞赏。

实际上，我正在使用angular 4应用程序。我遇到的情况是，我必须以dd / mm / yyyy发送Date发送到服务器。

<input type="date" [(ngModel)]="Students.dob" name="Students.dob">

checkDate() { console.log(Students.dob); }