Блог

Угловая реактивная форма ниже. Есть 2 кнопки, одна отправка и одна выборка деталей.

У рабочей кнопки отправки есть проверка формы, только номер мобильного телефона является обязательным. Это было достигнуто с использованием компонента required in.

Как я могу это сделать Еще одна выборка кнопки, мне нужно подтвердить, что 2 поля Id amp; date являются обязательными, и показать сообщение об ошибке в <span> , это не работает

Форма

 <form role="form" [formGroup]="pForm" >
<div class="row display-flex">
   <div class="col-lg-3 col-md-4 col-sm-6">
      <label>Id </label>
      <input class="form-control form-control-sm" formControlName="id" type="number" />
      <span *ngIf="submitted amp;amp; f.errors amp;amp; f.errors.idRequired"
         class="tooltiptext">{{'Id is required'}}</span>
   </div>
   <div class="col-lg-3 col-md-4 col-sm-6">
      <label> Date </label>
      <p-calendar type="number" dateFormat="dd-mm-yy" formControlName="eDate" 
         monthNavigator="true" appendTo="body"  yearNavigator="true"
         yearRange="1930:2030" >
      </p-calendar>
       <span *ngIf="submitted amp;amp; f.errors amp;amp; f.errors.eDateRequired"
         class="tooltiptext">{{'Id is required'}}</span>
   </div>
   <div class="col-lg-3 col-md-4 col-sm-6">
      <button class="btn btn-sm btn-primary bw" (click)="fetch()" 
         translate>traveler.getDetails</button>
   </div>
   <div class="col-lg-2 col-md-2 col-sm-3">
      <label>Mobile <span class="mdtr">*</span></label>
      <input type="text" numeric class="form-control form-control-sm" [readonly] = "gsm" formControlName="mobileNo" />
      <span *ngIf="submitted amp;amp; f.mobileNo.errors" class="tooltiptext" >{{'Mobile is required'}}</span>
   </div>
</div>
<button class="btn btn-sm btn-primary" type="submit" (click)="saveForm()">
Save
</button>
</form>
  

Здесь форма инициализирована, getDetail () Я попытался установить другие 2 поля как обязательные, но не сработало

 this.pForm = this.fb.group({
    id: [null],
    eDate: [null],
    mobileNo: ["", Validators.required]
})

get f() {
    return this.pForm.controls;
}


getDetail() {
    this.submitted = true;
    this.pForm.setValidators({
        idRequired: true,
        eDateRequired: true
    });

}

saveForm() {
        this.submitted = true;
        if (this.pForm.invalid) {
            Swal.fire("mandatory fiels are missing);
                return;
            }
        }
  

Когда вы нажимаете на getDetails, вы должны явно установить средства проверки для других полей, как показано ниже.

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

 getDetail() {
    this.submitted = true;
    this.pForm.get('id').setValidators([
        Validators.required,
    ]);
    this.pForm.get('eDate').setValidators([
        Validators.required,
    ]);
    this.pForm.controls['id'].updateValueAndValidity()
    this.pForm.controls['eDate'].updateValueAndValidity()
}
  

При отправке вы можете удалить средства проверки, как показано ниже

     this.pForm.controls['id'].setValidators([]);
    this.pForm.controls['eDate'].setValidators([]);
    this.pForm.controls['id'].updateValueAndValidity()
    this.pForm.controls['eDate'].updateValueAndValidity()
  

Вот рабочий Stackblitz