CODEWITHSUNDEEP
angulartypescriptvalidationformgroups
n_denny
n_denny

Reputation: 405

FormGroup validation in "exclusive or"

I have a FormGroup that is composed by 3 input fields: reservationCode, secretCode and barcode.

The field barcode is simply reservationCode + '-' + secretCode. (this because barcode is a field that can be found in text and usable with copy+paste function)

now, the button that uses these fields have to be active only if barcode has value or if reservationCode and secretCode has value.

the logic should be something like: "barcode || reservationCode && secretCode"

here's the code of the formGroup i have in my .ts:

 this.voucherVerifyUserDataFormGroup = formBuilder.group({
  reservationCode: [''],
  secretCode: [''],
  barcode: ['']
});

I don't know how to manage formControl Validators and if i have to create a custom one.

Upvotes: 0

Views: 1066

Answers (2)

CruelEngine
CruelEngine

Reputation: 2841

Try this : 

    this.voucherVerifyUserDataFormGroup.valueChanges.subscribe((form : any) =>{
     //check your condition : 

    if(form.barcode != '' || (form.reservationCode != '' && form.secretCode != '')){
     this.voucherVerifyUserDataFormGroup.setErrors(null);
    }
    else
    {
     this.voucherVerifyUserDataFormGroup.setErrors({ 'invalid': true});
    }
    })

Upvotes: 2

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You can achieve using *ngIf/disabled.

<input type="button" *ngIf="isDataPresent" value="Paste">

Component:

get isDataPresent(){
  return this.voucherVerifyUserDataFormGroup.get('barcode').value || (this.voucherVerifyUserDataFormGroup.get('reservationCode').value && this.voucherVerifyUserDataFormGroup.get('secretCode').value);
}

Upvotes: 0

Related Questions