小编Ivi*_*nov的帖子

角度复位反应形式

我正在尝试在发送表单后重置我的表单,但只有该值设置为 null。

组件.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>
Run Code Online (Sandbox Code Playgroud)

组件.ts

  noteForm: FormGroup = this.formBuilder.group({
    description: new FormControl(null, Validators.required)
  })
Run Code Online (Sandbox Code Playgroud)
 insertNote() {
   // bunch of code 

      this.noteForm.reset();

    }
  }
Run Code Online (Sandbox Code Playgroud)

问题是输入字段被标记为脏,如下所示:

在此处输入图片说明

reset reactive-forms angular angular-reactive-forms

1
推荐指数
1
解决办法
4075
查看次数