如何通常以角度绑定表单答案

【问题标题】：How to normally bind forms in angular如何通常以角度绑定表单
【发布时间】：2017-08-14 17:41:00
【问题描述】：

我有一个模板表单，它是根据指南编写的，但它们并没有真正起作用。我有几个模型：

export class User {
  constructor(public userId?: UserId,
              public firstName?: String,
              public lastName?: String,
              public address?: Address) {
  }
}

export class Address {
  constructor(
    public street?: String,
    public city?: String,
    public zipCode?: String) {
  }
}

我有组件：

Component({
  templateUrl: 'user.html'
})
export class MyComponent implements OnInit, OnDestroy{
  user: User;
  userForm: NgForm;
  ngOnInit(): void {
  }

还有页面本身：

<form novalidate #userForm="ngForm">


    <div class="form-group">

        <input required minlength="4" type="text"
               id="firstName"
               [(ngModel)]="user.firstName" name="firstName">
        <small *ngIf="!firstName.valid">Not valid!</small>
    </div>
    <div class="form-group">
        <input required ng-minlength="4" type="text"
               id="lastName"
               [(ngModel)]="user.lastName" name="lastName">
    </div>

    <div ngModelGroup="user.address">
        <div class="form-group">
            <input required ng-minlength="4"
                   type="text"
                   id="address-house"
                   [(ngModel)]="user.address.address1" name="address.address1">
        </div>

        <div class="form-group">
            <div class="form-group">
                <input required ng-minlength="4"
                       type="text"
                       id="zipCode"
                       [(ngModel)]="user.address.zipCode" name="address.zipCode">
            </div>
            <div>
                <input required ng-minlength="4"
                       type="text"
                       lass="form-control input-lg"
                       id="city"
                       [(ngModel)]="user.address.city" name="address.city">
            </div>
        </div>

    </div>
    <button type="button" (click)="checkAndProceed()">Continue</button>
    </div>
</form>

我唯一想做的就是添加验证 - 仅此而已。没有一个指南有帮助。我们可以进行 in-html 验证或 ts 验证吗？单击“继续”按钮并使其有效时调用验证会很好。

在这种验证情况下，我还会收到控制台错误： Cannot read property 'valid' of undefined

【问题讨论】：

标签： javascript html angular validation

【解决方案1】：

输入元素有很多属性。我们有名称、ID 和模板引用变量。您的代码缺少模板引用变量。它是模板引用变量，它保留对元素的引用，并具有与之关联的有效、脏和其他标志。

例如，更改您的代码以包含这样的模板引用变量：

<div class="form-group">
    <input required minlength="4" type="text"
           id="firstName"
           [(ngModel)]="user.firstName" name="firstName"
           #firstNameVar="ngModel">
    <small *ngIf="!firstNameVar.valid">Not valid!</small>
</div>

注意#firstNameVar。那是模板引用变量。它可以与您的 Id 和 name 属性命名相同。我只是将它命名为不同的名称，以便可以轻松地区分其他两个属性。

另请注意，*ngIf 随后更改为使用 firstNameVar.valid

有关模板引用变量的更多信息，请参阅：https://angular.io/guide/template-syntax#ref-vars

【讨论】：