Почему после empForm.reset (); обязательные поля помечены как недействительные ошибки? - PullRequest
Новая
       10

Почему после empForm.reset (); обязательные поля помечены как недействительные ошибки?

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

Я учусь Angular Форма. здесь простая форма, имеет поля ename / job / sal, ename / job обязательны. ДО того, как я отправлю, когда я ввожу значения, валидаторы работают нормально, а функция очистки также хорошо стирает заполненный текст. НО, ПОСЛЕ того, как я нажимаю на кнопку «Отправить» (которая вызывает empForm.reset ()), обязательные поля помечены красным цветом - ошибка недопустимых полей, кнопка «Очистить» также не может удалить красный цвет, я думаю, что это не разумное поведение. Я хочу только после отправки, все поля остаются без проверки красной метки. как этого добиться, спасибо.

Спасибо и привет, Мартин. 

<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
    <div class="fields-container">
        <mat-form-field>
            <input formControlName="ename" matInput placeholder=Ename>
            <mat-error *ngIf="empForm.controls['ename'].errors?.required">Ename is required.</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="job" matInput placeholder=Job>
            <mat-error *ngIf="empForm.controls['job'].errors?.required">Job is required.</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input formControlName="sal" matInput placeholder=Salary>
        </mat-form-field>
    </div>
    <div class="buttons-container">
        <button mat-raised-button type="submit" [disabled]="empForm.invalid">Submit</button>
        <button mat-raised-button type="button" (click)="onClear()">Clear</button>
    </div>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-emp',
  templateUrl: './emp.component.html',
  styleUrls: ['./emp.component.scss']
})
export class EmpComponent implements OnInit {
  empForm;
  constructor(private fb: FormBuilder) {
    this.empForm = this.fb.group({
      ename: ['', Validators.required],
      job: ['', Validators.required],
      sal: [1000]
    })
  }

  ngOnInit(): void {
  }

  onSubmit(){
    // save to db - TBD
    this.empForm.reset();
  }


  onClear(){
    this.empForm.reset();
  }

}

Ответы [ 2 ]

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

Я думаю, что он известен issue, как обходной путь , который вы можете попробовать:

HTML: 

<form [formGroup]="empForm" #f="ngForm">
  ...
</form>

TS : 

@ViewChild('f') myNgForm;

onSubmit() {
  // Service call
  this.myNgForm.resetForm();
}

Working_Demo

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

Вот пример, который вы можете сделать следующим образом:

html

<form [formGroup]="form" novalidate (submit)="submit()" #myform="ngForm">
     <input type="text" formControlName="firstName" />   
     <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">Name is required</p>
     <button type="submit">Submit</button>
   </form>

компонент 

constructor(private fb: FormBuilder) {   
     this.form = this.fb.group({
       firstName: ['', Validators.required]
     });   
  }

Мы просто экспортируем директиву ngForm в локальный и использует свое переданное свойство в качестве указания, чтобы знать, когда форма отправлена, вот и все!

...