如何解决角反应形式不支持ngIf
我有一个表单组,需要显示ngIf所需的输入之一。但是即使此输入不存在,formcontrol也会检查它并返回无效的表单。我的代码是这样的 html :
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label>mobile</label>
<input type="text" formControlName="mobile" />
<div *ngIf="!hasInfo">
<label>firstName</label>
<input type="text" formControlName="firstName" />
<label>lastName</label>
<input type="text" formControlName="lastName" />
</div>
<button type="submit">Submit</button>
</form>
ts :
constructor(){
this.formBuilder();
}
ngOnInit() {
if (accountResponse.length > 0) this.hasInfo= true;
}
formBuilder() {
this.myForm= new FormGroup({
mobile: new FormControl(null,Validator.required()),firstName: new FormControl(null,lastName: new FormControl(null,});
}
onSubmit(){
if(this.myForm.valid){
console.log("valid")
}else{
console.log("not valid")
}
}
如果hasInfo为true,则不显示firstName和lastName,我的表单应返回有效但始终无效
解决方法
您可以在表单初始化中添加条件验证器。
ngOnInit() {
if (accountResponse.length > 0) this.hasInfo= true;
this.formBuilder();
}
formBuilder() {
const required = this.hasInfo ? Validator.required : null;
this.myForm= new FormGroup({
mobile: new FormControl(null,Validator.required),firstName: new FormControl(null,required),lastName: new FormControl(null,});
}
,
ngIf
仅阻止在div
文件中呈现html
,并且不会更改.ts
文件上的反应形式验证。为此,请尝试以下操作:
.ts:
ngOnInit() {
if (accountResponse.length > 0) {
this.hasInfo= true;
updateValidations();
}
}
updateValidations() {
if( this.hasInfo ) {
this.myForm.get("firstName").clearValidators();
this.myForm.get("firstName").updateValueAndValidity();
this.myForm.get("lastName").clearValidators();
this.myForm.get("lastName").updateValueAndValidity();
}
}
根据this.hasInfo
的更改,调用此updateValidations
函数。
更改hasInfo
后,您必须从FormControls中添加/删除所需的验证器
查看本文-Dynamically Add/Remove Validators in Angular Reactive Forms
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。