Angular 2引用了验证消息的控件

Angular 2 referring to controls for validation messages

本文关键字：消息 控件 验证 引用 Angular      更新时间：2023-09-26

我正在尝试让验证消息在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未定义的错误信息(大概是因为我不能直接参考控制，出于某种原因)。

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

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

一旦你这样做了，在你的html模板中，你可以使用你正在寻找的语法。

*ngIf="!name.valid"

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

我认为有可能使用 Template driven forms 而不使用 Reactive forms/Model driven forms 。

我也认为，与 Reactive forms/Model driven forms ，这是唯一的方法，因为你必须告诉angular2，其中 formGroup ，一个特定的控制附加到…

相关文章：