如何让自定义双向数据绑定使表单变脏

Question

>我创建了一个具有双向数据绑定的组件

class MyCustom2Way{
      @Input() text: string;
      @Output() textChange = new EventEmitter<string>();
      // MyCustom2Way has something in the template that will 
      // trigger testChange.emit when user interacts with it
}

现在假设我以这样的形式使用 MyCustom2Way：

<form action="" #myForm="ngForm">
  <my-custom-2-way [(text)]="model.field" name="field"></my-custom-2-way>
</form>

当用户使用MyCustom2Way迭代时MyCustom2Way如何myForm变脏？

Answer 1

你应该使用ngModel和自定义ControlValueAccessor，否则form对你的组件一无所知，所以它不会被标记为脏。 [(text)]="model.field" - 只是句法糖。

Answer 2

您可以将表单传递给我的自定义 2 路组件，如下所示

<my-custom-2-way [(text)]="model.field" name="field" [form]="myForm"></my-custom-2-way>

然后在我的自定义组件中

class MyCustom2Way{
      @Input() text: string;
      @Output() textChange = new EventEmitter<string>();
      // MyCustom2Way has something in the template that will 
      // trigger testChange.emit when user interacts with it
      @Input Form:any 
      this.form._pristine=true;
}