Поля ввода помечены красным, несмотря на сброс формы в Angular - PullRequest
Новая
       48

Поля ввода помечены красным, несмотря на сброс формы в Angular

0 голосов
/ 21 апреля 2020

Я получил эту проблему, когда у меня есть форма с проверкой ввода, которая содержит кнопку сброса, которая при нажатии должна сбросить форму и, следовательно, состояние полей ввода, а также отправленное состояние. Поля ввода очищаются, однако они помечаются красным, поскольку одним из критериев проверки является то, что поле ввода не должно быть пустым. Может кто-нибудь объяснить, почему это происходит, или лучше, как это исправить.

Заранее спасибо! 

import { Component, OnInit } from "@angular/core";
import { NgForm } from "@angular/forms";

@Component({
  selector: "app-contact",
  templateUrl: "./contact.component.html",
  styleUrls: ["./contact.component.css"],
})
export class ContactComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  sendMessage(form: NgForm): void {
    if (form.invalid) {
      return;
    }
    form.resetForm();
    form.reset();
  }

  clear(form: NgForm): void {
    form.resetForm();
  }
}
<mat-card>
  <form
    class="contactForm"
    (ngSubmit)="sendMessage(postForm)"
    #postForm="ngForm"
    [ngFormOptions]="{ updateOn: 'submit' }"
  >
    <mat-form-field class="nameField">
      <mat-label> Your Name </mat-label>
      <input
        matInput
        type="text"
        required
        name="inputName"
        ngModel
        #name="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a name
      </mat-error>
    </mat-form-field>

    <mat-form-field class="emailField">
      <mat-label> Your E-Mail </mat-label>
      <input
        matInput
        type="email"
        required
        name="inputEmail"
        ngModel
        email
        #email="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a valid email address
      </mat-error>
    </mat-form-field>

    <mat-form-field class="msgField">
      <mat-label> Your Message </mat-label>
      <textarea
        matInput
        type="text"
        required
        name="message"
        ngModel
        #message="ngModel"
      >
      </textarea>
      <mat-error *ngIf="true">
        Please enter a message
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="sendBtn" color="accent" type="submit">
      Send
    </button>
    <button
      mat-raised-button
      class="clearBtn"
      color="warn"
      (click)="clear(postForm)"
    >
      Clear
    </button>
  </form>
</mat-card>

Ответы [ 2 ]

1 голос
/ 21 апреля 2020

Добавьте type="button" атрибут к вашей кнопке очистки.

Когда вы добавляете (ngSubmit)="sendMessage(postForm)" к форме, кнопка очистки рассматривается как отправка формы, и, следовательно, вызывается функция sendMessage(postForm) и как результат вы получаете сообщения проверки ..

В качестве примечания вы также можете использовать type = "reset" например, 

<button
  mat-raised-button
  class="clearBtn"
  color="warn"
  (click)="clear(postForm)"
  type="reset"
>
  Clear
</button>

Это сбрасывает все входные данные в форме к их начальным значениям.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

компонент. html

<mat-card>
  <form
    class="contactForm"
    (ngSubmit)="sendMessage(postForm)"
    #postForm="ngForm"
    [ngFormOptions]="{ updateOn: 'submit' }"
  >
    <mat-form-field class="nameField">
      <mat-label> Your Name </mat-label>
      <input
        matInput
        type="text"
        required
        name="inputName"
        ngModel
        #name="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a name
      </mat-error>
    </mat-form-field>

    <mat-form-field class="emailField">
      <mat-label> Your E-Mail </mat-label>
      <input
        matInput
        type="email"
        required
        name="inputEmail"
        ngModel
        email
        #email="ngModel"
      />
      <mat-error *ngIf="true">
        Please enter a valid email address
      </mat-error>
    </mat-form-field>

    <mat-form-field class="msgField">
      <mat-label> Your Message </mat-label>
      <textarea
        matInput
        type="text"
        required
        name="message"
        ngModel
        #message="ngModel"
      >
      </textarea>
      <mat-error *ngIf="true">
        Please enter a message
      </mat-error>
    </mat-form-field>

    <button mat-raised-button class="sendBtn" color="accent" type="submit">
      Send
    </button>
    <button
      mat-raised-button
      class="clearBtn"
      color="warn"
      (click)="clear(postForm)"
      type="button"
    >
      Clear
    </button>
  </form>
</mat-card>

Рабочая Stackblitz

1 голос
/ 21 апреля 2020

У меня была такая же проблема с моим Angular (v8) проектом. Проблема в том, что, хотя форма сбрасывается, состояние ошибки не возвращается к нулю.

Для меня сработало ручное восстановление состояния ошибки для каждого элемента управления формы. Это не самая красивая, но это сработало. Попробуйте что-то вроде этого: 

clear(form: NgForm): void {
    form.resetForm();
    Object.keys(form.controls).forEach(key =>{
       form.controls[key].setErrors(null)
    });
  }

Одно предупреждение, хотя я использовал Reactive Forms и создал форму как Formgroup, используя Formbuilder. Я не уверен, если просто использовать шаблоны форм, как вы, если результат будет таким же.

...