Question

我试图让验证消息在Angular 2中运行。对Angular 2进行了如此多的更改，以至于在互联网上似乎不是一个优雅的解决方案（所以请不要＆＃39 ; t将此标记为重复）。

目前，要在我的模型驱动表单上显示验证消息，请执行以下操作：

is nil: true
setter...
didFinishLaunching called
is nil: false
{
    Height = 667;
    Width = 375;
    X = 0;
    Y = 0;
}
is nil: false
{
    Height = 667;
    Width = 375;
    X = 0;
    Y = 0;
}
ViewController.viewDidLoad() called
is nil: false
{
    Height = 667;
    Width = 375;
    X = 0;
    Y = 0;
}

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

<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>

我记得我曾经能够通过使用简单的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]], }) }); }来显示验证消息，但现在我似乎无法在不参考整个表单组的情况下使其工作（{{1 }}）。如果我这么做的话，我会收到一条关于*ngIf="!name.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"

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

2 个答案: