Question

我正在基于ControlValueAccessor创建自己的输入字段。

如何在此类组件中获取验证信息？

以下是示例：https://stackblitz.com/edit/angular-ngmodel-valid?file=src/app/text-input.component.ts 自定义字段为required。

在TextInputComponent中，我指的是NgModel，但始终为valid。 {{formGroup.get('text').valid}}给了我正确的价值。

Answer 1

使用ControlValueAccessor时，必须重新构造应查看的NgModel。通过自己创建输入，您必须注意自定义输入的有效性，而不是内部输入的有效性。

我的意思是应该看到 app-text-input ，并像使用内部输入一样使用它。内部输入上的NgModel（无关紧要），仅用于新组件的HTML模板。

简而言之，表单中输入的引用是对 app-text-input 组件的。并使用ControlValueAccessor界面中的方法，您需要像本机输入本身一样更新和控制值。

例如：

<form ngForm="form">
  // the ngForm keeps the custom-inputs model

  // we put required here as this is now where we reference the model
  <custom-input [(ngModel)]="value" required>

    // this is just for templating, when you updating this value you must call the method writeValue, which sets the value of the custom-input which then validates the control.
    <input value="value" />

  </custom-input>

</form>

另一种解决方案 您也可以使用@Input或@Attribute向下传递属性。

我已经编辑了您的stackblitz

在此示例中，您只是向下传递了验证：

app.component.html

<custom-input required=true>
</custom-input>

custom-input.component.ts

@Input() required: boolean;

custom-input.component.html

<input [required]="required" />

使用ControlValueAccessor的有效信息

1 个答案: