angular - angular2 dynamic validate message doesn't work after upgrade to final -
i custom dynamic validate message form in angular2.rc4 (validate form without defining error messages @ each input)
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} '@angular/core'; import {ngformmodel} '@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; } errormessage() { let formcontrols = this._formdir.form; let control = formcontrols.find(this.controlname); if (control) { //do } return null; } } when upgrade angular2 final.
changed [ngformmodel] [formgroup], ngcontrol formcontrolname. , in controlmessages component can not formcontrols find control controlname.
how can it?
as per angular 2 final release can not use directives inside @component decorator.add controlmessagescomponent module declaration , use below controlmessages directive :
import { component, host, input } '@angular/core'; import { formgroupdirective } '@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) { } errormessage() { // find control in host (parent) form let allcontrols = this._formdir.form.controls; let c = allcontrols.hasownproperty(this.controlname) ? allcontrols[this.controlname] : null; if (c !== null) { //do } return null; } }
Comments
Post a Comment