升级到最终版本后,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;
}
}
我自定义动态验证 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;
}
}