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"