Angular：表单验证导致错误

debugcn 发表于 Dev

希腊语

我是 Angular 的新手，我的这个练习基于这个：forms。该示例告诉我们使用该#name属性并将其分配给“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;
    }
}

德米特里古巴

只需删除#name并使用companyName.value代替。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。