我需要将模型驱动器表单验证添加到我的自定义输入组件.
我不确定如何实现它将ngControl传递给我的组件.
我不确定如何实现它将ngControl传递给我的组件.
在我的plunkr示例http://plnkr.co/edit/QTmxl8ij5Z6E3xKh45hI?p=preview中,前两个输入标签正在工作,然后有my-form-input,它应该与前两个输入做同样的事情,但使用自定义组件
<form [ngFormModel]="loginForm">
<p>
<input type="text" ngControl="usernameX" required placeholder="usernameX" /><br>
valid {{usernameX.valid}}
</p>
<p>
<input type="text" ngControl="passwordX" required placeholder="passwordX"/><br>
valid {{passwordX.valid}}
</p>
<my-form-input [placeholder]="'usernameXX'" [required]="true" [control]="usernameXX"></my-form-input><br>
valid {{usernameXX.valid}}
<p>form is valid: {{loginForm.valid}}</p>
</form>
这里只是我的组件的一个想法
@Component({
selector: 'my-form-input',directives: [ FORM_DIRECTIVES ],template: `
<div>
<p>
<input type="text" [attr.placeholder]="placeholder" [attr.required]="required" [attr.ngControl]="control"/><br>
valid {{control.valid}}
</p>
</div>
`
})
export class InputComponent implements OnInit {
@Input() placeholder: string;
@Input() required: boolean;
@Input() control: Control;
谢谢
解决方法
带控件和验证的Angular2 FORM.
经过大量搜索后,我得出结论,使用ngModel最好从表单中获取值.通过使用它,更容易清除窗体的控件.和验证变得容易.并使用ngControl检查验证.
这是我表单的工作代码.
<form class="form-horizontal" id='myForm' role="form" [ngFormModel]="CreateGroup">
<div class="col-md-7">
Name: <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name'>
</div>
<div class="col-md-7">
Password: <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password'>
</div>
<div class="col-md-7">
<input type="radio" name='type' (click)='demoInfo.radio="Btech"' [checked]="'Btech' === demoInfo.radio">Btech
<input type="radio" name='type' (click)='demoInfo.radio="Mtech"' [checked]="'Mtech' === demoInfo.radio">Mtech
</div>
<div class="col-md-7">
<select #selectOption (change)='demoInfo.select=selectOption.value' class='form-control' ngControl='select'>
<option> select</option>
<option value='One' [selected]="demoInfo.select==='One'">One Value</option>
<option value='Two' [selected]="demoInfo.select==='Two'">two Value</option>
<option value='Three' [selected]="demoInfo.select==='Three'">Three Value</option>
</select>
</div>
</form>
<br>
<div class='text-center'>
<button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Create</button>
</div>
和班级的代码在这里……
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES,NgClass,FORM_DIRECTIVES,Control,ControlGroup,FormBuilder,Validators} from 'angular2/common';
class DemoInfo{
name:string;
password: string;
radio: any;
select: any;
}
@Component({
selector: 'my-app',templateUrl: 'mytemplate.html',directives: [CORE_DIRECTIVES,FORM_DIRECTIVES]
})
export class AppComponent {
CreateGroup: FormBuilder;
demoInfo: DemoInfo;
constructor(fb: FormBuilder){
this.demoInfo= new DemoInfo();
this.CreateGroup = fb.group({
'name': new Control(this.demoInfo.name,Validators.required),'password': new Control(this.demoInfo.password,'select': new Control(this.demoInfo.select,Validators.required)
})
}
addNewGroup(demoInfo:demoInfo) {
console.log(demoInfo,'whole object');
this.demoInfo= new DemoInfo();
}
}
请参阅此工作plunkr here
.
有关详细信息,请参阅此处
