升级到最终版本后,angular2 动态验证消息不起作用

angular2 dynamic validate message doesn't work after upgrade to final

我自定义动态验证 Angular2.RC4 中表单的消息(验证表单而不在每个输入定义错误消息)

ChangePass.ts

@Component({
    selector: '[change-password]',
    template: `<form [ngFormModel]="passwordForm" id="passwordForm" (ngSubmit)="changePassword()">
        <div class="row">
            <div class="input-field col s12">
                <input type="password" class="form-control" id="oldPassword" ngControl="oldPassword" [(ngModel)]="model.oldPassword">
                <label for="oldPassword">Current Password</label>
                <control-messages control="oldPassword"></control-messages>
            </div>
        </div>
    </form>`,
    directives: [ControlMessages],
})
export class ChangePasswordComponent {
    formBuilder;

    constructor(myElement:ElementRef, formBuilder:FormBuilder) {
        this.formBuilder = formBuilder;
        this.passwordForm = this.formBuilder.group({
            oldPassword: ['', Validators.required]
        });
    }
}

ControlMessages.ts

import {Component, Host} from '@angular/core';
import {NgFormModel} from '@angular/common';
@Component({
    selector: 'control-messages',
    inputs: ['controlName: control'],
    template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessages {
    controlName:string;

    constructor(@Host() private _formDir:NgFormModel) {
        this.helper = helper;
    }

    get errorMessage() {
        let formControls = this._formDir.form;
        let control = formControls.find(this.controlName);

        if (control) {
            //do something
        }
        return null;
    }
}

当我升级到 Angular2 final 时。
我将 [ngFormModel] 更改为 [formGroup],将 ngControl 更改为 formControlName。 在 ControlMessages 组件中,我无法通过 controlName.formControls 找到 control
我该怎么做?

根据 angular 2 最终版本,您不能在 @Component decorator.Add ControlMessagesComponent 中使用 directives 到模块声明并使用下面的 ControlMessages 指令:

import { Component, Host, Input } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'control-messages',
  template: `<div class="form-error" *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessagesComponent {
  @Input() public controlName: string;

  constructor(@Host() private _formDir: FormGroupDirective) {
  }

  get errorMessage() {
    // Find the control in the Host (Parent) form
    let allControls = this._formDir.form.controls;

    let c = allControls.hasOwnProperty(this.controlName) ? allControls[this.controlName] : null;
    if (c !== null) {
      //do something
    }
    return null;
  }
}