Question

我已经使用多个输入字段创建了自定义表单控件。我希望以一种方式使我的自定义控件验证，如果我将Validators.required分配给它，它只有在填充其中的所有输入时才有效。

整个控件的“必需”级别。

Answer 1

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

在线演示：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
    };
  }
}

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

1 个答案: