Angular2 FormBuilder Validatiors：グループに少なくとも1つのフィールドを入力する必要があります

Question

私は電話番号（モバイル、パーソナル、その他）を収集しています。私は少なくとも人口が入力される必要があります。私はAngular2 FormBuilderを使用しようとしています。

多くの研究の後、私はこの問題を回避するために問題を抱えています。私は他のメソッドを使ってそれを行うことができることを知っていますが、FormBuilder Validatorsを使用することが可能かどうか疑問に思っていました。 "Validators.required"を追加すると、3つのフィールドがすべて必要になります。任意の提案やアイデア？

（それはまだ微調整が必​​要である）私のグループバリ： "JB Nizet" からヒントの

phone: this._fb.group(
        { 
         other: [''], 
         personal: [''], 
         mobile: [''], 
        } 

ベースは、ここで私はそれを動作させるために実装しなければならなかったものだ

static phoneExists(group: FormGroup): { [key: string]: any } { 

    if (null != group) { 
     var other: AbstractControl = group.controls['other']; 
     var mobile: AbstractControl = group.controls['mobile']; 
     var personal: AbstractControl = group.controls['personal']; 
     var data: Object = group.value; 

     return (
      (other.valid && isEmptyInputValue(other.value)) 
      && (mobile.valid && isEmptyInputValue(mobile.value)) 
      && (personal.valid && isEmptyInputValue(personal.value)) 
      ) 
      ? { 'required': true } 
      : null; 
    } 
} 

マイグループ変更：

phone: this._fb.group(
        { 
         other: [''], 
         personal: [''], 
         mobile: [''], 
        }, 
        { validator: MyValidators.phoneExists } 
       ) 

私はしばらくかかりましたが、キーワードは「バリデーター」というキーワードを追加することでグループvaふたをする。 HTMLで

私は、次を追加しました：

<small *ngIf="!myForm.controls.profile.controls.phone.valid" class="text-danger"> 
             At least one phone is required. 
            </small> 

私は、これは他の誰の助けを願っています。

Answer 1

これは、あなたがすべてのFormGroupで使用できる汎用的なコードです：

export function AtLeastOneFieldValidator(group: FormGroup): {[key: string]: any} { 
    let isAtLeastOne = false; 
    if (group && group.controls) { 
    for (const control in group.controls) { 
     if (group.controls.hasOwnProperty(control) && group.controls[control].valid && group.controls[control].value) { 
     isAtLeastOne = true; 
     break; 
     } 
    } 
    } 
    return isAtLeastOne ? null : { 'required': true }; 
} 

と使用方法：

@Component({ 
    selector: 'app-customers', 
    templateUrl: './customers.component.html', 
    styleUrls: ['./customers.component.scss'] 
}) 
export class CustomersComponent implements OnInit { 

    public searchCustomerForm: FormGroup; 

    constructor() { } 

    ngOnInit() { 
    this.searchCustomerForm = new FormGroup({ 
     customerID: new FormControl(''), 
     customerEmail: new FormControl(''), 
     customerFirstName: new FormControl(''), 
     customerLastName: new FormControl('') 
    }, AtLeastOneFieldValidator); 
    } 
} 

Answer 2

私は、既存のバリデータに基づいたカスタムバリデータを作成するatLeastOne機能を使用します：

import { 
    FormGroup, 
    ValidationErrors, 
    ValidatorFn, 
    Validators, 
} from '@angular/forms'; 

export const atLeastOne = (validator: ValidatorFn) => (
    group: FormGroup, 
): ValidationErrors | null => { 
    const hasAtLeastOne = group && group.controls && Object.keys(group.controls) 
    .some(k => !validator(group.controls[k])); 

    return hasAtLeastOne ? null : { 
    atLeastOne: true, 
    }; 
}; 

美しさは、任意のバリデーターwiそれだけでなく、Validators.required。 OPの場合

、それはこのように使用されます：

{ 
    phone: this._fb.group({ 
    other: [''], 
    personal: [''], 
    mobile: [''], 
    }, { validator: atLeastOne(Validators.required) }) 
}