Question

我目前正在将我的Angular 2表单转换为最近引入的Form 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相同的组件中工作。但这似乎有点多余。有更好的解决方案吗？

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

Answer 1

我通过将控件本身传递给指令并使用[formControl] =＆＃34; control＆＃34;来解决它。将它挂钩到输入。

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

1 个答案: