Проверки не сбрасываются после отправки - PullRequest
Новая
       16

Проверки не сбрасываются после отправки

0 голосов
/ 24 июня 2019

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

    this.form.markAsPristine();
    this.form.markAsUntouched();
    this.form.updateValueAndValidity();
    this.form.clearValidators();
    this.form.clearAsyncValidators();

Ничего из этого на самом деле не делает работу.

Это мой HTML-код: 

    <form [formGroup]="form">

        <div class="row">
          <mat-form-field style="margin-top: 20px; margin-left: 20px">
            <input [errorStateMatcher]="matcher" formControlName="name" matInput placeholder="Prescurtare">
            <mat-error *ngIf="form.controls['name'].hasError('required')">
              Introduceti o valoare
            </mat-error>
          </mat-form-field>
        </div>

        <div class="row">
          <mat-form-field style="margin-top: 20px; margin-left: 20px">
            <input formControlName="fullName" matInput placeholder="Nume complet">
            <mat-error *ngIf="form.controls['name'].hasError('required')">
              Introduceti o valoare
            </mat-error>
          </mat-form-field>
        </div>

        <div class="col-xs-12" formArrayName="groups">
          <label for="imagePath">Grupe</label>
          <button mat-icon-button color="primary" (click)="addNewDepartment()">
            <mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
          </button>
          <div class="row" *ngFor="let ingredientCtrl of form.get('groups').controls; let i = index" [formGroupName]="i" style="margin-top: 10px;">
            <mat-form-field style="margin-left: 50px">
              <input formControlName="name" matInput placeholder="Nume">
              <mat-error *ngIf="form.get('groups').controls[i].hasError('required')">
                  Introduceti o valoare
                </mat-error>
            </mat-form-field>

            <mat-form-field style="margin-left: 50px">
              <input formControlName="year" matInput placeholder="Anul" [matAutocomplete]="auto">
              <mat-error *ngIf="form.get('groups').controls[i].hasError('required')">
                  Introduceti o valoare
                </mat-error>
            </mat-form-field>

            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
              </mat-autocomplete>

            <div class="col-xs-2">
              <button mat-icon-button color="accent" (click)="onDeleteDepartment(i)">
                <mat-icon aria-label="Delete">delete</mat-icon>
              </button>
            </div>

          </div>

        </div>

        <button type="submit" [disabled]="!form.valid" (click)="onSubmit()" class="btn btn-success" style="margin-top: 20px">Salveaza</button>
      </form>

Моймашинописный код: 

  form: FormGroup;

    private initForm() {

    let name = '';
    let fullName = '';
    const groups = new FormArray([], [Validators.required]);

    this.form = new FormGroup(
      {
        'name': new FormControl(name, [Validators.required]),
        'fullName': new FormControl(fullName, [Validators.required]),
        'groups': groups
      });

    this.matcher = new DepartmentStateMatcher();
  }
  onSubmit() {

    this.dataService.addDepartment(this.form.value);

    this.resetForm();
    setTimeout(() => { this.exampleDatabase.departmentsChange.value.push(this.dataService.getDialogData()); this.refreshTable(); }, 100);
  }

  private resetForm() {
    this.form.markAsPristine();
    this.form.markAsUntouched();
    this.form.updateValueAndValidity();
    this.form.clearValidators();
    this.form.clearAsyncValidators();
    let name = '';
    let fullName = '';
    const groups = new FormArray([], [Validators.required]);

    this.form = new FormGroup(
      {
        'name': new FormControl(name, [Validators.required]),
        'fullName': new FormControl(fullName, [Validators.required]),
        'groups': groups
      });
    this.matcher = new DepartmentStateMatcher();
  }

export class DepartmentStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

Я ожидаю, что проверки будут сброшены, но это не так.

...