Question

我有一个模板表单，我是从导游那里写的，但他们并没有真正的工作。我有几个型号：

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验证吗？点击＆＃39;继续＆＃39;进行验证会很有用。按钮并使其有效，如果它是。

在这种验证的情况下，我另外得到控制台错误： Cannot read property 'valid' of undefined

Answer 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和名称属性命名相同。我只是将它命名为不同的东西，因此可以很容易地区分其他两个属性。

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

有关模板参考变量的详细信息，请参阅：https://angular.io/guide/template-syntax#ref-vars

如何正常绑定角度形式

1 个答案: