Angular 2指的是验证消息的控件

Question

我正在尝试在Angular 2中使用验证消息。对Angular 2进行了如此多的更改，以至于在互联网上似乎没有一个优雅的解决方案（所以请不要将其标记为重复）。

目前，要在我的模型驱动表单上显示验证消息，我这样做：

<div class="form-group">
     <label for="name">Name</label>
     <input type="text" class="form-control" id="name" formControlName="name">
     <div class="text-warn" *ngIf="!addUserForm.controls.name.pristine && !addUserForm.controls.name.valid">
        Please enter a name
    </div>
</div>

我的组件的formbuilder看起来像这样：

ngOnInit() {
    this.addUserForm = this.fb.group({
        name: ['', [Validators.required]],
        email: ['', [Validators.compose([EmailValidators.normal(), Validators.required])]],
        phone: ['', [Validators.compose([UniversalValidators.isNumber(), Validators.required])]],
        address: this.fb.group({
            addr1: ['', [Validators.required]],
            addr2: [''],
            addr3: [''],
            city: ['', [Validators.required]],
            zip: ['', [Validators.required]],
        })
    });
}

我记得我曾经能够通过使用简单的*ngIf="!name.valid"来显示验证消息，但现在我似乎无法在不参考整个表单组（*ngIf="!addUserForm.controls.name.valid"）的情况下使其工作。如果我这么做，我得到一个关于valid未定义的错误消息（大概是因为我不能直接引用控件，出于某种原因）。

必须有一个不那么冗长的方法来做到这一点。

Answer 1

我记得以前我曾经能够通过使用简单的*ngIf="!name.valid"来显示验证消息......

我认为有可能与Template driven forms不与Reactive forms/Model driven forms。

我也认为，使用Reactive forms/Model driven forms，这是唯一的方法，因为你必须告诉angular2，哪个formGroup，一个特定的控件附加到......

Answer 2

一种方法是在组件中实现get函数。所以你要这样做：

get name() { return this.addUserForm.get('name') }

完成后，在您的html模板中，您可以使用您正在寻找的语法。

*ngIf="!name.valid"