在 Angular 2 中使用模板驱动表单时，如何访问组件中的表单？

Question

我有一个简单的模板驱动表单，如下所示：

HTML：

<div class="container">
    <h1>Hero Form</h1>

    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" [(ngModel)]="model.name" name="name" #name="ngModel">
      </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" [(ngModel)]="model.power" name="power">
          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
        </select>
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
    </form>
</div>

组件：

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';

@Component({
    selector: 'at-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.scss']
})

export class HeroComponent implements OnInit {
    constructor() {
        //
    }

    ngOnInit() {
        //
    }

    powers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer'];

    model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

    submitted = false;

    onSubmit() { this.submitted = true; }

    newHero() {
      this.model = new Hero(42, '', '');
    }
}

我该怎么做：

1. 从组件（不是从标记）重置整个表单？
2. 也从组件而不是标记中重置单个表单字段（例如名称字段）？

Answer 1

您可以使用ViewChild获取form

标记

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
...
</form>

组件

ViewChild('heroForm') public heroForm: NgForm;

我建议你也看看Reactive Forms。如果你想在打字稿中使用form，我认为这会更方便，而不是在标记中