Angular2 FormBuilder Validatiors: wymagane jest wypełnienie co najmniej jednego pola w grupie

Question

Mam formularz, w którym zbieram numery telefonów (komórkowe, osobiste, inne). Muszę mieć co najmniej wypełnione dane wejściowe. Próbuję użyć Angular2 FormBuilder.

Po wielu badaniach mam problem z obejściem tego problemu. Wiem, że mogę to zrobić za pomocą innych metod, ale zastanawiałem się, czy jest to możliwe przy użyciu FormBuilder Validators. Jeśli dodaję "Validators.required", wszystkie 3 pola będą wymagane. Wszelkie sugestie lub pomysły?

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

bazowa na podpowiedź z "JB Nizet", oto co miałem do wdrożenia, aby to działało:

Moja grupa Validator (to musi jeszcze szczypanie):

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

My zmiana grupy:

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

Zajęło mi trochę czasu, ale kluczem jest dodanie słowa kluczowego "walidator" i spowoduje to, że grupa va lidator do ognia.

W HTML I dodaje następujące:

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

Mam nadzieję, że to pomoże nikogo innego.

Answer 1

Jest to ogólny kod, który można używać z każdym 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 }; 
} 

a użycie:

@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

używam atLeastOne funkcję, która tworzy własny walidator na podstawie istniejącej walidator :

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, 
    }; 
}; 

Piękno polega na tym, że można użyć dowolnego walidatora wi to i nie tylko Validators.required.

W przypadku OP, będziemy go stosować tak:

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