当包含有效的自定义组件时， Angular 表单最初无效

Question

我有一个简单的 Angular (v8.0) 组件，它只包含一个带有 required 属性集的输入。我有一个模板驱动的表单，其中包含该组件并将其绑定(bind)到初始值。当应用程序启动时，输入的状态有效，因为它绑定(bind)到初始值。但该表格错误地无效。对输入值进行任何更改后，表单状态就会正确，并从此保持正确。

我在 validate 方法实现中返回输入的验证状态，这似乎是问题的根源。如果我返回一个根据控件的当前值自己构造的对象，它就会正常工作。不过，我宁愿避免这种情况，因为将来我需要其他验证状态，并且我不想手动检查所有状态。

我尝试在代码中的不同位置添加对 updateValueAndValidity 的调用，但这没有效果。

如何使表单的初始验证状态考虑嵌套自定义组件的状态？

这是该组件的代码:

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validator, NgModel } from "@angular/forms";

@Component({
  selector: "my-input",
  template: '<input [(ngModel)]="value" required #model="ngModel" />',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: MyInputComponent,
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: MyInputComponent,
      multi: true
    }
  ]
})
export class MyInputComponent implements ControlValueAccessor, Validator {
  onChange: any = () => {};
  onTouch: any = () => {};

  @ViewChild("model", { static: true }) model: NgModel;

  private _value: string = "";

  set value(x: string) {
    if (this._value !== x) {
      this._value = x;
      this.onChange(x);
    }
  }
  get value() {
    return this._value;
  }

  writeValue(obj: any): void {
    this.value = obj;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }

  validate(c: FormControl) {
    return this.model.errors;
    //return this.value ? null : { required: true }; // this works!
  }
}

这是包含它的外部表单的代码:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <form #frm="ngForm">
      <my-input [(ngModel)]="myValue" name="myInput"></my-input>
    </form>
  `
})
export class AppComponent {
  myValue: string = "hello";
}

这是一个 StackBlitz:https://stackblitz.com/edit/angular-lp3xpa 。在输入中添加或删除字符，表单状态更改为有效。

Answer 1

这听起来像是与 this question 相同的问题，这建议使用 setTimeout 从 writeValue 手动触发另一个验证的解决方法。这似乎可以解决问题。

在MyInputComonent中:

  writeValue(obj: any): void {
    this.value = obj;
    setTimeout(() => { this.onChange(this.value); }, 0);
  }

参见here .

但这看起来像是一个黑客。