我需要向自定义输入组件添加模型驱动表单验证。
我不确定如何将 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, Validators.required),
'select': new Control(this.demoInfo.select, Validators.required)
})
}
addNewGroup(demoInfo:demoInfo) {
console.log(demoInfo, 'whole object');
this.demoInfo= new DemoInfo();
}
}
引用此工作plunkr here .
详情请看这里
关于angularjs - 组件内部的 Angular2 表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36493650/