Angular 7 Reactive Forms: проблема при сбросе валидаторов, и вся форма содержит - PullRequest
Новая
       21

Angular 7 Reactive Forms: проблема при сбросе валидаторов, и вся форма содержит

0 голосов
/ 26 февраля 2019

Я хочу отправить и сбросить форму после проверки.

проверка и передача и инициализация значений входов работают хорошо, но валидаторы не будут сброшены.

вот результат послеФорма отправки

enter image description here

Зарегистрировать элемент управления в шаблоне: 

    <form [formGroup]="createSeanceForm" #formDirective="ngForm"  class="needs-validation" (ngSubmit)="createSeance(createSeanceForm, formDirective)">

Мой ввод и как я показываю ошибки: 

<div class="col-sm-12 ">
       <div class="form-group" [ngClass]="{
            'has-success': (submitted  || f.date.touched || f.date.dirty) &&  f.date.valid ,
            'has-danger': (submitted || f.date.touched || f.date.dirty) &&  f.date.invalid
                                                                        }">
           <input type="datetime-local" class="form-control" formControlName="date" placeholder="Date de la visite">
       </div>

    	<div *ngIf="submitted && f.date.errors" class="invalid-feedback">
      	<small class="text-danger ml-3 my-1" *ngIf="f.date.errors.required">Merci de renseigner ce champ !</small>

    </div>

Мой импорт: 

 import { FormBuilder, FormGroup, Validators, FormGroupDirective } from '@angular/forms';

Мои объявления конструктора и formGroup: 

createSeanceForm: FormGroup;

    constructor( 
    ...
        private formBuilder: FormBuilder
        ) { 
           
           
          this.initSeanceForm();

        }

Мой InitForm: 

initSeanceForm() {
    this.createSeanceForm = this.formBuilder.group({
    date: ['', Validators.required],
    act: ['', Validators.required],
    doctor: ['', [Validators.required]],
    price: ['',],
    teeth: ['',]
    //teeth: ['', [Validators.required]]
});
  }

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

Функция отправки и сброса 

 createSeance(myForm, formDirective: FormGroupDirective){    

      this.submitted = true;
        
      // stop here if form is invalid
      if (this.createSeanceForm.invalid) {
          return;
      }else{
     TODO : API stuff.

       formDirective.resetForm();
       this.createSeanceForm.reset();
       this.createSeanceForm.markAsPristine();
       this.createSeanceForm.markAsUntouched();

        $('#addSeanceModal').modal('hide')
    }
...