カスタムコントロールで「必須」バリデータをオーバーライドする方法Angular2

Question

複数の入力フィールドを使用してカスタムフォームコントロールを作成しました。 Validator.requiredを割り当てると、その内部のすべての入力が満たされた場合にのみ有効になるように、カスタムコントロールを検証する必要があります。

コントロールの全体でより高いレベルの「必要」があります。

Answer 1

独自のカスタムバリデータを作成し、formGroupを作成するときに2つのパラメータに設定します。カスタムバリデーターでは、すべてのコントロールをループし、必要に応じてvalue - > validate valueを取得できます。

オンラインデモ：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 
    }; 
    } 
}