重置 Angular 模板驱动的表单？

Question

我正在学习 Angular，但我不知道如何重置模板驱动表单的验证。

在官方教程中，他们展示了一种重置表单的方法，因此即使未触及的字段为空，它也不会显示任何错误消息，但这对我不起作用。

这是该应用的官方示例，其中“新英雄（重置）”和“新英雄（未重置）”似乎导致相同的情况（输入左侧的红色错误指示器，“名称是必需的”在名称输入下的警告）。我删除输入中的值并按下按钮，但错误消息仍然存在：

https://stackblitz.com/angular/kmoqyljrgve

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           required
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>
  </div>

  <div class="form-group">
    <label for="alterEgo">Alter Ego</label>
    <input type="text" class="form-control" id="alterEgo"
           [(ngModel)]="model.alterEgo" name="alterEgo">
  </div>

  <div class="form-group">
    <label for="power">Hero Power</label>
    <select class="form-control" id="power"
            required
            [(ngModel)]="model.power" name="power"
            #power="ngModel">
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
    </select>
    <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
      Power is required
    </div>
  </div>

  <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
  <i>with</i> reset

  &nbsp;&nbsp;
  <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
  <i>without</i> reset

 <!-- NOT SHOWN IN DOCS -->
  <div>
    <hr>
    Name via form.controls = {{showFormControls(heroForm)}}
  </div>
 <!-- - -->
</form>

谁能解释一下或者告诉我我误解了什么？

提前致谢

Answer 1

您可以使用resetForm 表单重置表单。

form.resetForm();

form 是你的表单实例heroForm

Answer 2

For select drop down use the below:

/* html */

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)" style="font-family: Montserrat-Regular;">
    <div class="form-group">
        <input type="text" class="form-control" id="name" name="name" aria-describedby="emailHelp" placeholder="Name" 
        #name="ngModel" [class.is-invalid]="name.invalid && name.touched" ngModel [(ngModel)]="drinkname" required>
        <p style="color: red; font-size: 12px" [class.d-none]="name.valid || name.untouched">Name is required</p>
    </div>
    <div class="form-group">
        <select class="form-control" id="rating" name="rating" #rating="ngModel" 
        [class.is-invalid]="rating.invalid && rating.touched" ngModel [(ngModel)]="drinkrating" required>
        <option value="undefined" hidden>Select Rating</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
        </select>
        <p style="color: red; font-size: 12px" [class.d-none]="count.valid || count.untouched">Count is required</p>
    </div>
    <button type="submit" class="btn btn-primary" [disabled]="itemForm.form.invalid">Submit</button>
  </form>


/* ts */

onSubmit(userForm: NgForm) {

      this.formData = new FormData();
      this.formData.append('name', this.drinkname);
      this.formData.append('rating', this.drinkrating);

    const options = {
      headers: new HttpHeaders()
        .set('Authorization', 'Bearer ' + localStorage.getItem('token'))
    }

    this.http.post('http://localhost:8099/createi', this.formData, options)
      .subscribe(
        data => {
          var status = data['status'];
          var message = data['message'];
          if (status == -1){
            this.notifyService.showError(message,"Exists");
            return;
          }

          // this is the important code, dont worry about name input because it will use placeholder as default value
          userForm.resetForm({
            rating: "undefined",

         });
        },
        error => console.log(error)
      );
  }