在新的 Angular 2 表单中将 NgModel 绑定到 FormControl

Posted 2023-02-22

【中文标题】在新的 Angular 2 表单中将 NgModel 绑定到 FormControl

【英文标题】：Binding NgModel to FormControl in new Angular 2 forms

【发布时间】：2016-10-25 23:19:16

【问题描述】：

我目前正在将我的 Angular 2 表单转换为最近引入的表单 API，但我无法将嵌套在指令中的输入连接到 FormGroup 中定义的控件。

我在组件中为这样的表单定义表单和验证（在 Typescript 中）：

model = 
   foo: 12.34


amount: : FormControl = new FormControl('', Validators.required);

ngOnInit() 
    this.fooFormGroup = new FormGroup(
        amount: this.amount,
      );    
    this.form.addControl("formGroup", this.formGroup);

在 html 中，我使用 name-property 将表单连接到输入。这有效，除非我使用嵌入这样的输入的自定义指令：

<fieldset>
    <form [formGroup]="fooFormGroup ">
         <custom-input-for-decimals [decimals]="4" [value]="model.amount" (valueChange)="model.amount = $event" controlname="amount"></custom-input-for-decimals>
    </form>
</fieldset>

在指令中，我更新并预先格式化了 ngModel 值（例如，截去 4 位以上的小数）。它需要一个 controlname 属性，该属性在模板中设置为 name 属性：

template: '<input type="text" [(ngModel)]="inputValue" (blur)="onBlur()" name="controlname">'

但这不会在 formcontrol 和 ngModel 之间创建一个钩子。只有在我使用指令的位置旁边添加一个额外的隐藏输入时，在与 formGroup-tag 相同的组件中，它才有效。但这似乎有点多余。有没有更好的解决方案？

注意：将 FormControl 传递给指令并使用该表单控件属性的名称也不起作用。以自己的形式嵌套输入似乎并不比隐藏输入更冗长。

【参考方案1】：

我通过将控件本身传递给指令并使用 [formControl]="control" 将其连接到输入来解决它。