कोणीय 2 फॉर्मबिल्डर Validatiors: एक समूह में कम से कम एक फ़ील्ड भरने की आवश्यकता है

Question

मेरे पास एक ऐसा फॉर्म है जहां मैं फोन नंबर (मोबाइल, व्यक्तिगत, अन्य) एकत्र कर रहा हूं। मुझे कम से कम इनपुट आबादी की आवश्यकता है। मैं Angular2 Formbuilder का उपयोग करने की कोशिश कर रहा हूँ।

अधिक शोध के बाद मुझे इस समस्या के आसपास अपना सिर प्राप्त करने में समस्या हो रही है। मुझे पता है कि मैं इसे अन्य तरीकों से उपयोग कर सकता हूं लेकिन मैं सोच रहा था कि फॉर्मबुल्डर सत्यापनकर्ताओं का उपयोग करना संभव है या नहीं। अगर मैं "Validators.required" जोड़ता हूं तो सभी 3 फ़ील्ड आवश्यक हैं। कोई सुझाव या विचार?

मेरे समूह सत्यापनकर्ता (यह अभी भी फेरबदल की जरूरत है): "जेबी 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 का कारण बन जाएगा आग लगाने के लिए लिडरेटर।

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

मुझे आशा है कि किसी और इस मदद किसी को भी:

HTML में मैं निम्नलिखित गयी।

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

सौंदर्य यह है कि आप किसी भी वैधकर्ता वाई का उपयोग कर सकते हैं वें और न केवल Validators.required।

ओपी के मामले में, यह इस तरह से इस्तेमाल किया जाएगा:

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