angular сброс реактивной формы - PullRequest
Новая
       20

angular сброс реактивной формы

1 голос
/ 04 февраля 2020

Я пытаюсь сбросить форму после ее отправки, но только значение установлено на ноль.

компонент. html

  <div *ngIf="!loading" fxLayout="row" class="note-textarea">
    <form  fxFlex fxLayout="column" fxLayoutGap="10px" [formGroup]="noteForm">
      <mat-form-field fxFlex>
        <textarea matInput #note rows="1" maxlength="100" placeholder="Note" formControlName="description"></textarea>
        <mat-hint align="end">{{note.value?.length || 0}}/100</mat-hint>
        <mat-error *ngIf="noteForm.get('description').errors && noteForm.get('description').touched">description is required</mat-error>
      </mat-form-field>
      <div fxFlex>
        <button mat-stroked-button class="save-btn" (click)="insertNote()">Save</button>
      </div>
    </form>
  </div>

component.ts 

  noteForm: FormGroup = this.formBuilder.group({
    description: new FormControl(null, Validators.required)
  })

 insertNote() {
   // bunch of code 

      this.noteForm.reset();

    }
  }

проблема в том, что поле ввода помечено как грязное, как показано ниже:

enter image description here

Ответы [ 3 ]

2 голосов
/ 04 февраля 2020

Попробуйте с помощью кнопки type="reset" опция 

<button type="reset">Reset</button>

Пример Stackblitz

1 голос
/ 04 февраля 2020

Вы можете использовать ngForm, чтобы сделать это

In your Html file

<form  fxFlex fxLayout="column" fxLayoutGap="10px" [formGroup]="noteForm" #noteForm="ngForm">

In your ts file

 @ViewChild('noteForm', { static: true }) noteForm: NgForm;
//to reset form
this.noteForm.resetForm();

Заменить имя соответственно в вашем HTML и файлы TS.

0 голосов
/ 04 февраля 2020

вы можете использовать formGroup reset метод, подобный этому (click)="noteForm.reset()", и этот метод пометит, что все потомки помечены нетронутыми и нетронутыми , и значением всех потомки к нулю.

пример 

<div [formGroup]="form">
    <input placeholder="description..." type="text" formControlName="description" ><br/><br/>

    <div
        *ngIf="form.get('description').hasError('required') && (form.get('description').dirty || form.get('description').touched) ">

        description is required

    </div>
    <button type="button" (click)="insertNote()">Add ?</button> &nbsp;
    <button type="button" (click)="form.reset()">reset ?</button>

</div>

демо ?

с angular материалом, который вам не нужен чтобы проверить, касались ли элементы управления 

   <mat-error *ngIf="noteForm.get('description').hasError('required')">
       description is required
   </mat-error>

демо ?

Я не использую это <button type="reset">Reset</button>, потому что большую часть времени я хочу сбросить форма из компонента и иногда я хочу передать начальное значение после сброса

...