Сбросить угловые валидные формы при событии клика - PullRequest
Новая
       22

Сбросить угловые валидные формы при событии клика

0 голосов
/ 01 ноября 2018

Я реализую динамические формы с помощью модуля угловых форм, и он работает нормально. Какая функциональность мне нужна: Изначально должно быть поле выбора, содержащее несколько опций. В зависимости от выбора должны отображаться различные поля формы. Как я объяснил, я реализовал, и это работает, вот в чем моя проблема. Если я выберу опцию 1 и если я отправлю форму без заполнения полей, форма будет отображать ошибки проверки, что тоже здорово. Но когда я выбираю вариант 2, поля формы меняются, но по умолчанию все обязательные поля показывают ошибки. Как я могу этому противостоять? Пожалуйста, предложите мне.

HTML 

<div class="row">
        <mat-form-field class="col-lg-2">
            <mat-select placeholder="Form For" (selectionChange)="getSelectedFormName($event)">
                <mat-option value="uf001">UF001</mat-option>
                <mat-option value="uf002">UF002</mat-option>
                <mat-option value="uf003">UF003</mat-option>
            </mat-select>
        </mat-form-field>
        <div class="col-lg-4">
            <button type="button" class="btn btn-default btn-one" (click)="getDynamicForm()">GET FORM</button>
        </div>
      </div>

       <form [formGroup]="form" (ngSubmit)="submit(model)" >
             <formly-form [model]="model" [fields]="fields" [form]="form" *ngIf="isFormTypeSelected" >
        </formly-form>
         <button type="submit" class="btn btn-success">Submit</button>
   </form>

файл ts 

     getSelectedFormName(eve) {
        this.isFormSaved = false;
        this.form = new FormGroup({});
        this.fields=[];
        this.model = {};
        this.parentFormName = eve.value;
    }
    getDynamicForm() {
        this.isFormSaved = false;
        this.savedFields=[];
        this.getDynamicFormBasedOnSelection(this.parentFormName);
        //fields getting from api call
    }

    getDynamicFormBasedOnSelection(formName: string) {
        this.auth.getDynamicFormBasedOnSelction(formName, this.userAgencyCode).subscribe(
            (result) => {
                const str = JSON.stringify(result);
                this.fields = JSON.parse(str);
                this.isFormTypeSelected = true;
                this.addEvents(this.fields);
            });
    }

Здесь я предоставляю свои экраны для лучшего понимания

enter image description here

enter image description here

enter image description here

1 Ответ

0 голосов
/ 01 ноября 2018

На самом деле form.reset() просто сбросьте значения формы. Вам также необходимо сбросить директиву формы. например 

<form  [formGroup]='authForm' (submit)='submitForm(formDirective)' #formDirective="ngForm" class="is-mat-form">

<mat-form-field>
  <input matInput placeholder="Email ID" formControlName='login'>
    <mat-error *ngIf="authForm.controls.login.hasError('required')">
          Email is required
    </mat-error>
    <mat-error *ngIf="authForm.controls.login.hasError('email')">
          Please enter a valid email address
    </mat-error>           
</mat-form-field>
<mat-form-field>
  <input matInput type="password" formControlName='password' placeholder="Password">
  <mat-error *ngIf="authForm.controls.password.hasError('required')">
      Password is required
  </mat-error>
  <mat-error *ngIf="authForm.controls.password.hasError('minlength')">
       Password must be minimum 6 digit long. 
  </mat-error>  
</mat-form-field>

и .ts файл 

submitForm(formDirective: FormGroupDirective){
  if (this.authForm.invalid) {
   console.log('form submitted')
   this.authForm.reset()
  return;
}

это сбросит только значения формы, чтобы сбросить ошибку формы, нам нужно сбросить и директиву формы. 

submitForm(formDirective: FormGroupDirective){
  if (this.authForm.invalid) {
   console.log('form submitted')
   this.authForm.reset()
   formDirective.resetForm();
  return;
}
...