Question

我想验证我的表单字段，但我在其中有一个表单组，如下所示：

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <label>
        <span>Full name</span>
        <input type="text" placeholder="Name" formControlName="name">
      </label>
      <div class="error" *ngIf="!user.controls.name.valid && user.controls.name.touched">
        Name is required
      </div>
      <div formGroupName="account">
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Email" formControlName="email">
        </label>
        <div
          class="error"
          *ngIf="!user.controls.address.email.valid">
          Email is required
        </div>
        <button type="submit" [disabled]="user.invalid">Sign up</button>
    </form>

但是在电子邮件领域，它无法正常运行

!user.controls.address.email.valid

如果该字段有效或无显示消息，我该怎么办？

Answer 1

尝试这样的语法：

vm.$bindAsObject

我在这里有一个完整的例子：https://github.com/DeborahK/Angular2-ReactiveForms这是我的Pluralsight课程的代码：Angular 2：Reactive Forms。

Answer 2

假设我的结构是

 this.UserForm = this.fb.group({
            id: [this.userobj.id], 
            addresses: this.fb.group({
                street: [this.addrssobj.street, Validators.required],            
            })
});

我的addresses.street验证将是这样的（html）

<div formGroupName="addresses">
            <div>
                <label class="center-block"> Street: </label>
                <input type="text" class="form-group" formControlName="street" required>
                <div *ngIf="UserForm.get('addresses').get('street').hasError('required') && UserForm.get('addresses').get('street').touched" class="text-danger">
                    Street is required
                </div>
            </div>

如何访问被动表单组验证？

2 个答案: