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

Question

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

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

我有两个问题。

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

2. 简单的验证，比如对输入元素的要求，它在子组件中不起作用。我该怎么办？

这是Plunkr，主要展示了我想要实现的目标。

@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
    });
  }
}

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

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

Answer 1

不知道您为什么不使用 Reactive Forms - 它们几乎是为验证而设计的。

你也可以混合搭配，你不会因为使用 ngModel 而被锁定在使用模板驱动表单。

您可以将反应式表单仅用于验证。

component.ts

form: FormGroup;

  constructor(fb : FormBuilder) {
    this.form = fb.group({
      'firstName' : ['', Validators.required],
      'lastName' : ['', Validators.required]
    })

  }

  hasError(n: string){
    return this.form.get(n).hasError('required') && this.form.get(n).touched;
  }

模板.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>

Plunkr 找到 here