Angular 2 ng-需要
Angular 2 ng-required
我在 angular 2 中制作了一个模型驱动的表单,只有当上面的复选框是 unchecked.I 时,其中一个输入字段必须显示,这是使用 *ngIf 完成的。
我的问题是如何设置仅当复选框未选中时才需要的输入?在 angular 1.x 中,我可以通过视图中的 ng-required="condition" 实现这一点。
这里是 html:
//复选框
<div class="checkbox col-sm-9">
<label>
<input type="checkbox" id="getCompanyAddress" style="cursor: pointer;" [formControl]="form.controls['address']" >Use the company address
</label>
</div>
//选项输入:
<div *ngIf="form.value.address == false" class="form-group" [ngClass] = "{'has-error':!form.controls['address'].valid && form.controls['address'].touched}" >
<label for="add_gestion_adress" class="col-sm-3 control-label">Address
</label>
<div class="col-sm-9"><textarea rows="1" id="add_gestion_adress" class="form-control" name="add_gestion_adress" [formControl]="form.controls['address']" ></textarea>
</div>
</div>
//型号代码:
form: FormGroup;
constructor(fb:FormBuilder){
this.form = fb.group({
'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])],
'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])],
'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])],
'address':[false,Validators.compose([Validators.minLength(1)])],
'locality':[null, Validators.compose([Validators.required])],
'county':[null,Validators.compose([Validators.required])],
'country':[null,Validators.compose([Validators.required])]
})
}
一种方法是监听复选框表单控件中的值变化,并相应地监听另一个控件中的 add/remove 验证器。
示例:
this.form.get('checkbox-control').valueChanges.map(
value => {
if(value) {
this.form.get('other-control').setValidators(Validators.required);
}else {
this.form.get('other-control').clearValidators();
}
}
);
<textarea [required]="your angular expression">
以上作品在最新版本Angular4
FormBuilder 采用第二个参数,该参数接受用于跨字段验证的验证器:
this.form = fb.group({
'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])],
'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])],
'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])],
'address':[false,Validators.compose([Validators.minLength(1)])],
'locality':[null, Validators.compose([Validators.required])],
'county':[null,Validators.compose([Validators.required])],
'country':[null,Validators.compose([Validators.required])]
}
, { validator: this.crossFieldValidation });
你可以定义它做任何事情。
crossFieldValidation(ctrl: FormGroup): ValidationErrors|null {
let isRequired = ctrl.controls.myCheckbox.value === true;
let hasValue = ctrl.controls.myMaybeRequiredControlXX.value;
if (isRequired && !hasValue) return {XXrequired: true};
return null;
}
要检查 display/ngClass 的错误,请使用 form.errors?.XXrequired
或您的 crossFieldValidation()
返回的任何密钥,而不是 form.controls.XX.errors?.required
。
我在 angular 2 中制作了一个模型驱动的表单,只有当上面的复选框是 unchecked.I 时,其中一个输入字段必须显示,这是使用 *ngIf 完成的。 我的问题是如何设置仅当复选框未选中时才需要的输入?在 angular 1.x 中,我可以通过视图中的 ng-required="condition" 实现这一点。
这里是 html:
//复选框
<div class="checkbox col-sm-9">
<label>
<input type="checkbox" id="getCompanyAddress" style="cursor: pointer;" [formControl]="form.controls['address']" >Use the company address
</label>
</div>
//选项输入:
<div *ngIf="form.value.address == false" class="form-group" [ngClass] = "{'has-error':!form.controls['address'].valid && form.controls['address'].touched}" >
<label for="add_gestion_adress" class="col-sm-3 control-label">Address
</label>
<div class="col-sm-9"><textarea rows="1" id="add_gestion_adress" class="form-control" name="add_gestion_adress" [formControl]="form.controls['address']" ></textarea>
</div>
</div>
//型号代码:
form: FormGroup;
constructor(fb:FormBuilder){
this.form = fb.group({
'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])],
'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])],
'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])],
'address':[false,Validators.compose([Validators.minLength(1)])],
'locality':[null, Validators.compose([Validators.required])],
'county':[null,Validators.compose([Validators.required])],
'country':[null,Validators.compose([Validators.required])]
})
}
一种方法是监听复选框表单控件中的值变化,并相应地监听另一个控件中的 add/remove 验证器。
示例:
this.form.get('checkbox-control').valueChanges.map(
value => {
if(value) {
this.form.get('other-control').setValidators(Validators.required);
}else {
this.form.get('other-control').clearValidators();
}
}
);
<textarea [required]="your angular expression">
以上作品在最新版本Angular4
FormBuilder 采用第二个参数,该参数接受用于跨字段验证的验证器:
this.form = fb.group({
'name': [null,Validators.compose([Validators.required, Validators.minLength(1)])],
'type': ["en gros",Validators.compose([Validators.required, Validators.minLength(2)])],
'person':[null,Validators.compose([Validators.required, Validators.minLength(1)])],
'address':[false,Validators.compose([Validators.minLength(1)])],
'locality':[null, Validators.compose([Validators.required])],
'county':[null,Validators.compose([Validators.required])],
'country':[null,Validators.compose([Validators.required])]
}
, { validator: this.crossFieldValidation });
你可以定义它做任何事情。
crossFieldValidation(ctrl: FormGroup): ValidationErrors|null {
let isRequired = ctrl.controls.myCheckbox.value === true;
let hasValue = ctrl.controls.myMaybeRequiredControlXX.value;
if (isRequired && !hasValue) return {XXrequired: true};
return null;
}
要检查 display/ngClass 的错误,请使用 form.errors?.XXrequired
或您的 crossFieldValidation()
返回的任何密钥,而不是 form.controls.XX.errors?.required
。