如何在自定义控件Angular2中覆盖“必需”验证器

Question

我制作了一个带有多个输入字段的自定义表单控件。我想让我的自定义控件以某种方式验证，如果我将 Validators.required 分配给它，它只有在它里面的所有输入都被填充时才有效。

对整个控件的“要求”更高级别。

Answer 1

创建自己的自定义验证器，在创建 formGroup 时将其放入 2 参数中。在自定义验证器中，您可以遍历所有控件然后获取值 -> 根据需要验证值。

在线演示：https://plnkr.co/edit/pcXsxP?p=preview

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms'

import { CustomValidators } from './custom.validators';

@Component({
  selector: 'app-root',
  template: `
    <form (ngSubmit)="onSubmit()" novalidate [formGroup]="fg">
      <div><input type="text" formControlName="input1"></div>
      <div><input type="text" formControlName="input2"></div>
      <div><input type="text" formControlName="input3"></div>
      <div><input type="text" formControlName="input4"></div>
      <div><input type="text" formControlName="input5"></div>
      <button type="submit">Submit</button>
      <p>Status {{ fg.valid }}</p>
    </form>
  `
})
export class AppComponent implements OnInit {
  fg: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {

    this.fg = this.fb.group({
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
    }, {
      validator: CustomValidators.multipleInputRequired
    });

  }

  onSubmit() {
    console.log(this.fg);
  }
}

custom.validator.ts

import { FormGroup } from '@angular/forms';

export class CustomValidators {
  static multipleInputRequired(fg: FormGroup) {
    let controls = fg.controls;
    let valid = true;
    if (controls) {
      for (let c in controls) {
        if (controls[c].value.trim() == '') {
          valid = false;
        }
      }
    }
    return valid ? null : {
      multipleInputRequired: true
    };
  }
}