Javascript 需要在自定义组件输入中进行简单验证

我有多个组件，每个组件都有一些输入、选择和其他表单元素。这是使用模板驱动表单开发的所有元素

但以前它不是在组件方面开发的，所以我们能够检查表单状态。现在，我们已经按组件划分了所有内容，但我们无法得到验证

我有两个问题

为了将子组件表单元素获取到父组件，我使用了ControlValueAccessor，这种方法正确吗？在我的子组件中，我有多个表单控件，如输入、选择和其他

简单的验证，比如输入元素上的required，它在子组件中不起作用。我该怎么办

这就是我想要实现的目标

@Component({
  selector: 'my-child',
  template: `

  <h1>Child</h1>
  <input [ngModel]="firstName" (ngModelChange)="firstSet($event)" required>
  <input [ngModel]="lastName" (ngModelChange)="lastSet($event)" required>  <!-- required validation is not working -->
  `,
  providers: [
    {provide: NG_VALUE_ACCESSOR, useExisting: Child, multi: true}
  ]
})

export class Child implements ControlValueAccessor, OnChanges {

  private firstName: string,
  private lastName: string;

  fn: (value: any) => void;

  constructor(){

  }

  writeValue(value: any) {
    console.log("write value");
    console.log(value);
    if(value){
      this.firstName = value.firstName;
      this.lastName = value.lastName;
    }
  }

  registerOnChange(fn: (value: any) => void) {
    this.fn = fn;
  }

  registerOnTouched() {}

  firstSet(v: string){
    this.firstName = v;

    this.fn({
      firstName: this.firstName,
      lastName: this.lastName
    });
  }

  lastSet(v: string){
    this.lastName = v;

    this.fn({
      firstName: this.firstName,
      lastName: this.lastName
    });
  }
}

@组件({
选择器：“我的孩子”，
模板：`
小孩
`,
供应商：[
{provide:NG\u VALUE\u访问器，useExisting:Child，multi:true}
]
})
导出类子级实现ControlValueAccessor，OnChanges{
private firstName:string，
私有lastName:string；
fn：（值：任意）=>无效；
构造函数（）{
}
writeValue（值：任意）{
控制台日志（“写入值”）；
console.log（值）；
如果（值）{
this.firstName=value.firstName；
this.lastName=value.lastName；
}
}
registerOnChange（fn:（值：any）=>void）{
这个.fn=fn；
}
寄存器（）{}
第一组（v:字符串）{
this.firstName=v；
这个。fn({
名字：这个，名字，
lastName:this.lastName
});
}
lastSet（v:string）{
this.lastName=v；
这个。fn({
名字：这个，名字，
lastName:this.lastName
});
}
}

如果您发现错误的方法，请说明哪种方法是正确的

---

注意：请推荐适用于模板驱动表单的解决方案。我忘了提到我使用的是Angular 2.4.8版本。

不确定为什么不使用-它们几乎是为验证而设计的

您还可以混合和匹配，您不会因为使用ngModel而被锁定在使用模板驱动的表单中

您可以使用反应式表单进行验证

组件技术

template.html

<h1>Child</h1>
  <input [ngModel]="firstName" name="firstName"  [formControl]="form.get('firstName')" required>
  <div *ngIf="hasError('firstName')">This field is required</div>
  <input [ngModel]="lastName" name="lastName"  [formControl]="form.get('lastName')" required>  <!-- required validation is not working -->
  <div *ngIf="hasError('lastName')">This field is required</div>

Child
此字段必填
此字段必填

---

普朗克感谢您的回复。但目前大约有30个组件，它们都是使用模板驱动的方式开发的，所以我不认为我可以建议改变每一种形式。所以我只需要找到模板驱动表单的解决方案。

<h1>Child</h1>
  <input [ngModel]="firstName" name="firstName"  [formControl]="form.get('firstName')" required>
  <div *ngIf="hasError('firstName')">This field is required</div>
  <input [ngModel]="lastName" name="lastName"  [formControl]="form.get('lastName')" required>  <!-- required validation is not working -->
  <div *ngIf="hasError('lastName')">This field is required</div>