Angular：表单验证导致错误

Question

我是Angular的新手，我将此练习作为基础：forms。该示例告诉我们使用#name属性并将其分配给“名称”。但是，该属性已用于检索提交表单时的数据（如上一条规则所示）。尝试定义我自己的名称时收到错误：

Cannot read property 'name' of undefined 

我对此有点困惑。

<form method="post"> 
    <div class="form-group"> 
     <label for="inputName">Name</label> 
     <input #name type="text" class="form-control" id="inputName" placeholder="Name" required minlength="2" maxlength="20" 
     name="companyName" [(ngModel)]="company.name" #companyName="ngModel"> 

     <div *ngIf="companyName.errors && (companyName.dirty || companyName.touched)" class="alert alert-danger"> 
      <div [hidden]="!companyName.errors.required">Name is required</div> 
      <div [hidden]="!companyName.errors.minlength"> Name must be at least 2 characters long.</div> 
      <div [hidden]="!companyName.errors.maxlength">Name cannot be more than 20 characters long.</div> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-default" (click)="add(name.value, street.value, number.value, zipCode.value, city.value, iban.value, telephone.value)">Submit</button> 
</form> 

我的公司对象：

export class Company { 
    name: string; 
    street: string; 
    number: string; 
    zipCode: string; 
    city: string; 
    iban: string; 
    telephone: string; 

    constructor(name: string, street: string, number: string, zipCode: string, city: string, iban: string, telephone: string) { 
     this.name = name; 
     this.street = street; 
     this.number = number; 
     this.zipCode = zipCode; 
     this.city = city; 
     this.iban = iban; 
     this.telephone = telephone; 
    } 
} 

Answer 1

只需卸下#name，并使用companyName.value代替。

https://angular.io/docs/ts/latest/guide/forms.html