В угловом 7 я только что создал одну форму с несколькими полями и кнопкой «Отправить». В форме есть несколько обязательных полей. Проблема в том, что когда я нажимаю кнопку «Отправить», она отправляется, когда обязательные поля пусты.

Я добавляю следующий код во все поля ввода моей формы в формате HTML.

<div class="error" *ngIf="form.get('TournamentEndDate').invalid && 
form.get('TournamentEndDate').touched">*This Field is Required</div>


<form name="createForm" #tourDetailsData='ngForm' 
(ngSubmit)="saveEmployee(tourDetails)" enctype='multipart/form-data' 
novalidate>
<div class="form-group" [formGroup]="form">
                    <label class="lable label-default">Tournament 
Name<span style="color: red">*</span></label>
                    <input class="form-control" name='TournamentName' 
formControlName="TournamentName"
                        [(ngModel)]='tourDetails.TournamentName' required 
/>
                    <div class="error" 
*ngIf="form.get('TournamentName').invalid && 
form.get('TournamentName').touched">*This Field is Required</div>
                </div>
.....
.....
 <button type="submit" value="Submit" tooltip="Submit" >Submit</button>
                    <button type="reset" value="Reset" tooltip="Reset" 
(click)="reset()">Reset</button>
</form>

машинопись:

ngOnInit() {
    this.tourDetails.TournamentType = '';
    this.tourDetails.StarStatus = 0;
    this.form = this.formBuilder.group({
      Logo: [null, [Validators.required]], TournamentType: [null, 
Validators.required],
      TournamentName: [null, Validators.required], TournamentStartDate: 
[null, [Validators.required]],
      ....
      ....
    });
  }
....
....
saveEmployee(tourDetailsData: Usermodel) {
if (this.form.valid) {
  console.log('form submitted');
} else {
   this.validateAllFormFields(this.form);
   }
  ....
  .....

validateAllFormFields(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(field => {
    const control = formGroup.get(field);
    if (control instanceof FormControl) {
       control.markAsTouched({ onlySelf: true });
    } else if (control instanceof FormGroup) {
       this.validateAllFormFields(control);
     }
  });
}

Я ожидаю следующий результат:

Когда я нажимаю кнопку «Отправить», она не будет отправлена, когда обязательные поля пусты. После того, как все обязательные поля введены, он отправляется.

0
Sandy Santhosh

3 ответа

Не отключайте кнопку, если форма недействительна. Это очень плохая практика проектирования.

Что вы можете сделать, это добавить условие для ng-submit о действительности вашей формы.

Здесь ваша форма tourDetailsData может быть обнаружена как действительная или недействительная благодаря tourDetailsData.form.valid .

Просто измените (ngSubmit)="saveEmployee(tourDetails)" на tourDetailsData.form.valid && (ngSubmit)="saveEmployee(tourDetails)"

Если форма недействительна, она не вызовет метод saveEmployee и покажет вам ошибки.

Просто отключите кнопку, если форма недействительна:

 <button type="submit" value="Submit" tooltip="Submit" [disabled]="form.invalid">Submit</button>

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

    saveEmployee(tourDetailsData: Usermodel) {
if (this.form.valid) {
  console.log('form submitted');
} else {
   this.validateAllFormFields(this.form);
   }
  ...
  ...
  return;
 }

validateAllFormFields(formGroup: FormGroup) {
    Object.keys(formGroup.controls).forEach(field => {
    const control = formGroup.get(field);
    if (control instanceof FormControl) {
       control.markAsTouched({ onlySelf: true });
    } else if (control instanceof FormGroup) {
       this.validateAllFormFields(control);
     }
  });
}
58554089