0

I want to check the validation between two different fields OR condition. Supposed I have two fields age and birth_date. I want to check only one field required either age or birth_date.

I am using Angular 8. My form is nested with Add more features.

4
  • what do you mean by add more features.. Is it a formarray ? Commented Feb 20, 2020 at 8:15
  • Yes @AkhilNaidu Commented Feb 20, 2020 at 8:20
  • okay, I will create a stackblitz example Commented Feb 20, 2020 at 8:27
  • Please do it. Thanks @AkhilNaidu Commented Feb 20, 2020 at 8:55

2 Answers 2

1

You can write custom validation and check your flow.

this.userFormGroup= this.formBuilder.group({
   birth_date: [''],
   age : [''],
   }, {validator: this.customValidation});
customValidation(formGroup): any {
  const birthField = formGroup.controls['birth_date'].value;
  const ageField = formGroup.controls['age '].value;
  if (birthField && ageField) return null;
  if (birthField) return { ageRequired: true };
  if (ageField) return { birthRequired: true };
 }
}

<div *ngIf="!userFormGroup.valid"> 
  <p *ngIf="userFormGroup.hasError('ageRequired')">The age is required!</p>
  <p *ngIf="userFormGroup.hasError('birthRequired')">The birth date is required!</p>  
</div>

Sign up to request clarification or add additional context in comments.

Comments

0

Hope this helps...on form submission result will be dispalyed

app.component.ts

export class AppComponent implements OnInit {
   form: FormGroup;

   constructor(private formBuilder: FormBuilder){}

   ngOnInit() {
     this.form = this.formBuilder.group({
       nestedForm: this.formBuilder.array([
          this.formBuilder.group({
          age: [null, Validators.required],
          dob: [null, Validators.required],
          validObject: [false]
     }),
     this.formBuilder.group({
        age: [null, Validators.required],
        dob: [null, Validators.required],
        validObject: [false]
     })
   ])
   });   
  }

  checkFormValidation() {
    this.form.get('nestedForm')['controls'].filter(item => {
      if(item.get('age').valid || item.get('dob').valid) {
        item.get('validObject').setValue(true);
      } else {
         item.get('validObject').setValue(false);
      }
   });

} }

app.component.html

<div class="container">
   <form [formGroup]="form" (submit)="checkFormValidation()">
<div formArrayName="nestedForm" *ngFor="let item of form.get('nestedForm')['controls']; let i = index">
  <ng-container [formGroupName]="i">
    <div class="form-group">
      <label for="email">Age:</label>
      <input type="number" class="form-control" id="email" formControlName="age" placeholder="Enter Age" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">DOB:</label>
      <input type="text" class="form-control" id="pwd" formControlName="dob" placeholder="Enter DOB" name="pwd">
    </div>
    <span [ngClass]="item.get('validObject').value ? 'success'  : 'error'">Valid: {{item.get('validObject').value}}</span>
  </ng-container>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

app.component.css

.success {
   color: green;
}

.error {
   color: red;
 }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.