如何使用材料形式字段

时间:2018-03-11 16:50:37

标签: angular5 angular-material2 angular-forms

我需要在提交表单后将表单重置为原始状态。我在FormGroup中使用材质表单字段来创建输入字段。因此,当我从formgroup调用reset方法时,表单不会恢复到其原始状态,而是验证将所有字段设置为无效状态。

我的表单模板

<form [formGroup]="createUserForm" (ngSubmit)="createUser()" novalidate class="add_user_form normal_form">
      <div class="form_input_field">
          <i class="fas fa-user"></i>
        <mat-form-field>
            <input formControlName="uname"  matInput placeholder="UserName*">
            <mat-error *ngIf="createUserForm.controls['uname'].hasError('required') && formSubmitted">
              Please enter your username
            </mat-error>
          </mat-form-field>
      </div>
     <div class="form_button_field">
        <button mat-raised-button class="form_btn_submit" color="primary">Submit</button>
        <button mat-raised-button type="reset" class="form_btn_cancel" color="warn">Cancel</button>
      </div>
    </form>  

我的提交功能

createUser() {
    if(this.createUserForm.valid) {
      this.createUserForm.reset();
    }
  }

重置后如何将表单恢复到原始状态?

0 个答案:

没有答案