Javascript 如何在有角的图形中正常绑定窗体

我有一个模板表单，是我从指南中写出来的，但是它们并不真正起作用。 我有几种型号：

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>

无效！
继续

我唯一想做的就是添加验证——仅此而已。没有一个导游帮忙。我们可以用html验证还是ts验证？当单击“继续”按钮并使其有效时，调用验证会很好

在这种验证情况下，我还得到控制台错误：

---

无法读取未定义的属性“valid”

输入元素上有许多属性。我们有name、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

有关模板引用变量的详细信息，请参见：