Форма на основе шаблона Angular5 с пользовательской проверкой не сбрасывает ошибки проверки - PullRequest
Новая
       34

Форма на основе шаблона Angular5 с пользовательской проверкой не сбрасывает ошибки проверки

0 голосов
/ 18 мая 2018 
I am using angular5 forms with custom validation.

Но при сбросе формы ошибки проверки не сбрасываются.Я использую этот валидатор для проверки пробелов в текстовом поле.

Как мы сбрасываем элементы управления с состояниями валидации шаблонов управляемых форм в угловых 5?Я знаю, что элементы управления могут быть сброшены путем установки значений модели, к которым они привязаны

RequiredFieldDirective.ts 

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[requiredField][ngModel]',
  providers: [{
                provide: NG_VALIDATORS,
                useExisting: RequiredFieldDirective,
                multi: true
            }]
})
export class RequiredFieldDirective implements Validator {

  validate(c: AbstractControl): {[key: string]: any} {
        console.log(c.value)
        if(c.value){
            let v = c.value.toString().trim();
            return ( v == '')? {"requiredField": true} : null;
        }
  }
}

html
<input class="{{dashboardNameInput1.invalid && dashboardNameInput1.pristine && isFormInValid?'text-field-dashboard-inValidInput':'text-field-dashboard'}}"
             name="dashboardName"
             autocomplete="false"
             type="text" i18n-placeholder placeholder="Dashboard Name"
             [ngModel]="dashboard?.dashboardName"
             maxlength="255"
             required
             requiredField
             #dashboardNameInput1="ngModel"
      />
      <br>
      <span class="errorMessageDashboard" i18n  *ngIf="dashboardNameInput1.errors?.requiredField">
              Please Enter Dashboard Name.
      </span>
      <span class="errorMessageDashboard" [hidden]="dashboardNameInput1.valid || (dashboardNameInput1.pristine && !controlVariable?.dashboardName?.invalid)">
          <span i18n  *ngIf="dashboardNameInput1.errors?.required">
              Please Enter Dashboard Name.
          </span>
      </span>
<button *ngIf="!editModeDashboardName" class="button-style-08" (click)="createNewDashboard(dashboardForm)" i18n>Add</button>

ts
@ViewChild('dashboardForm') dashboardForm;

updateDashboardName(dashboardForm){


  this.dashboardForm.reset()
this.dashboardForm.resetForm()
dashboardForm.reset();
            dashboardForm.resetForm();
    }
...