Как сделать вложенную пользовательскую проверку в Angular 8 - PullRequest
Новая
       0

Как сделать вложенную пользовательскую проверку в Angular 8

0 голосов
/ 20 февраля 2020

Я хочу проверить проверку между двумя различными полями ИЛИ условие. Предположим, у меня есть два поля age и birth_date. Я хочу проверить только одно обязательное поле: age или birth_date.

Я использую Angular 8. Моя форма вложена с Добавить дополнительные функции.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Вы можете написать собственную проверку и проверить ваш поток. 

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>
0 голосов
/ 20 февраля 2020

Надеюсь, это поможет ... при отправке формы будет отображен результат

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