Проверка угловой формы, как показать сообщение об ошибке при отправке

У меня есть следующая форма:

<form [formGroup]="editProfileForm">
    <input type="text" id="name" class="form-control" placeholder="First" formControlName="firstName [(ngModel)]="profileDetails.first_name">
    <small class="text-danger" [hidden]="editProfileForm.controls['firstName'].valid || (editProfileForm.controls['firstName'].pristine && !submitted)">First name Required</small>
    <input type="text" class="form-control" placeholder="Last" formControlName="lastName" [(ngModel)]="profileDetails.last_name">
    <small class="text-danger" [hidden]="editProfileForm.controls['lastName'].valid || (editProfileForm.controls['lastName'].pristine && !submitted)">Last name Required</small>
    <button class="save-changes-btn" [disabled]="(!editProfileForm.valid)" (click)="saveDetails();">Save Changes</button>
</form>

а editProfile определяется в файле компонента как

this.editProfileForm = this.formBuilder.group({
    firstName: [_.get(this.profileDetails, 'first_name', ''), Validators.required],
    lastName: [_.get(this.profileDetails, 'last_name', ''), Validators.required],
});

Теперь мне нужно показать сообщения проверки при нажатии кнопки отправки. Теперь я отключил кнопку отправки, если форма недействительна. Но он не будет отображать сообщения об ошибках рядом с соответствующими полями, и это заставит пользователя думать, что ничего не происходит. Как я могу вызвать сообщения об ошибках, которые будут отображаться рядом с соответствующими полями ввода?

2
0
12 597
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете сделать что-то подобное.

Сначала удалите логику отключения в кнопке отправки.

В шаблоне компонента.

<form [formGroup]="editProfileForm" (ngSubmit)="onSubmit()">
  <div class="form-group block" [ngClass]="{'has-error': submitted && (editProfileForm.controls.firstName.errors)}">
    <label>Email</label>
    <input type="text" class="form-control" formControlName="firstName">
    <p>
      <span *ngIf="submitted && editProfileForm.controls.firstName.errors?.required">First name is required</span>
    </p>
  </div>

  // other controls
</form>

В классе компонентов

public onSubmit(): void {
  this.submitted = true;
  if(!this.editProfileForm.valid) {
    return;
  }

  // make the submitted variable false when submission is completed.

}

при необходимости вы можете удалить следующую часть.

[ngClass]="{'has-error': submitted && (editProfileForm.controls.firstName.errors)}"

Он добавит класс css к элементу, когда элемент управления формы недействителен и отправлен.

Эта конструкция editProfileForm.controls.firstName.errors?.required написана не очень хорошо, так как метод get () используется для доступа к элементам управления формы, метод hasError () также используется для ошибок. Лучше используйте editProfileForm.get('firstName').hasError('required')

Sergey Glazirin 12.09.2019 14:19

Используйте метод showValidationMsg() и передайте группу форм в качестве параметра внутри метода кнопки отправки:

showValidationMsg(formGroup: FormGroup) {

    for (const key in formGroup.controls) {
        if (formGroup.controls.hasOwnProperty(key)) {
            const control: FormControl = <FormControl>formGroup.controls[key];

            if (Object.keys(control).includes('controls')) {
                const formGroupChild: FormGroup = <FormGroup>formGroup.controls[key];
                this.showValidationMsg(formGroupChild);
            }

            control.markAsTouched();
        }
    }
}

у меня отлично работал с Angular Material и FormGroup. благодарю вас!

ukie 02.09.2020 16:14

При сохранении, если форма недействительна, просто вызовите markAllAsTouched() в группе форм.

saveDetails() {
  if(!this.editProfileForm.valid) {
    this.editProfileForm.markAllAsTouched();
  }
}

Другие вопросы по теме