Html 模板驱动表单中的表单验证问题

我正在使用Angular 6开发一个web应用程序。我想创建一些受HTML输入组件启发的自定义组件。例如：

CustomComponent.ts（typescript）

CustomComponent.html（模板）

---

对象

myForm.valid

（其中

myForm

与上一个模板中的

#myForm

关联）始终返回

true

值，即使文本字段中未输入任何内容。此行为是错误的：如果我没有在必填字段中插入任何内容，我希望此值为false。

您应该检查表单是否脏，它是否有效。所以两者都必须是真实的。否则，它将显示它未被更改。

要将验证添加到自定义输入组件，应将以下内容添加到提供程序：

{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => InputTextComponent),
  multi: true
}

您必须在InputExtComponent中实现默认方法：

validate(control: AbstractControl): ValidationErrors | null {
    return null;
}

如果使用使用NG_value_访问器实现的writeValue（）方法正确更新组件中名为value的属性，然后确保调用（可以通过在默认输入上实现更改事件来执行此操作）：

最后，将isRequired输入更改为默认的required属性

 @Input() required: boolean;

您的NgModel现在应该正确更新

编辑：以避免使用required（但这是正确的方法）。在验证方法中放置以下代码：

validate(control: AbstractControl): ValidationErrors | null {
    return this.isRequired && this.value.length === 0 : { required: true } : null;
}

当Angular运行自己的验证时，它会调用此方法。当此方法返回除null以外的任何值时，对象将添加到FormControl&NgModel中的errors属性中

---

这是一个巨大的话题，有一些伟大的文章正确地解释了这一切。不过，正如所问，这应该可以解决问题。

谢谢，除了最后一步，我什么都做了。为什么我需要编辑输入名称（@input（）required:boolean；），这在我的自定义组件的模板中是如何反映的？好的，它可以工作。但是如果我想保留isRequired属性呢？我想避免从调用方使用“required”属性。。。在使用调用者的自定义属性“isRequired”之前当使用NgModel和ControlValueAccessor时，您正在通知Angular您将把此组件作为默认HTML输入。您可以使用isRequired，但是，您的输入元素不是组件内的输入，而是您的InputExtComponent本身。我会更新我的答案，包括一个变通办法，但是，我建议不要这样做。这就是为什么建议像实际输入一样使用require。

{
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => InputTextComponent),
  multi: true
}

validate(control: AbstractControl): ValidationErrors | null {
    return null;
}

this.propagateChange(this.value);

 @Input() required: boolean;

validate(control: AbstractControl): ValidationErrors | null {
    return this.isRequired && this.value.length === 0 : { required: true } : null;
}