Angular 基于单选按钮选择的表单控件验证
Angular form controls validating based on radio button selection
我有一个表单,其中会显示一些字段以防问题得到回答YES.Thus,如果答案为“是”,则必须验证这些表单控件。
但是在我的表格中发生的是,如果我没有填写这些字段,表格就会变得无效。这是我的代码:
<label for="DSYesNo"><h3> Does you need to access other Data? </h3> </label>
<div *ngFor="let obj of yesNoArray">
<input type="radio" class="form-control" name="DSYesNo" value="{{obj}}" formControlName="DSYesNo" (change)="DSYesNO(obj)">
{{obj}}
</div>
<div *ngIf='allDSflag'> // allDSflag by default is false.
<div form="form-group">
<label for="allDS"><h3> Data Subject Category: </h3> </label>
<div [ngClass]="{
'has-errors': ((primaryForm.controls.allDS.errors (primaryForm.controls.allDS.dirty || primaryForm.controls.allDS.touched)) ),
'has-success': (!primaryForm.controls.allDS.errors) }">
<div *ngFor="let DScategory of allDataSubjects">
<input type="checkbox"
formControlName="allDS"
name="allDS"
(click)="onOtherDataSubjectClick(DScategory)"
>
{{DScategory.category}}
</div>
<!--Validations-->
<ul class="help-block">
<li *ngIf="primaryForm.controls.allDS.errors?.requiredTrue &&
(primaryForm.controls.allDS.dirty || primaryForm.controls.allDS.touched)">This field is required</li>
</ul>
</div>
这是我检查无线电的选择值以设置标志的地方。
DSYesNO(value) {
console.log(value);
if (value=="Yes") {
this.allDSflag = true
} else
this.allDSflag = false;
}
这里是我创建表单的地方:
createForm() {
this.primaryForm = this.formBuilder.group({
DSYesNo: [],
allDS:['', Validators.compose([
Validators.requiredTrue
])],
justifyOtherDS: ['', Validators.compose([
Validators.required
])]
}
这里是提交 bottn,只要表单无效就必须禁用它:
<input type="submit" class="btn btn-primary" [disabled]="((!primaryForm.valid) && !allDSflag)" value="Submit" />
你能帮我理解是什么让按钮总是禁用吗?有人吗?
如果您想根据其他字段的值验证字段,您可以订阅字段的 ValueChanges Observable,然后设置或取消设置验证器。
this.primaryForm.get('DSYesNo')
.valueChanges
.subscribe(value => {
const otherFiled = this.primaryForm .get('otherField');
if(value==='YES'){
otherFiled.enable();
otherFiled.setValidators([Validators.required]);
} else {
otherFiled.disable()
otherFiled.clearValidators();
}
});
对于禁用按钮,只需检查表单是否有效
<button type="submit" [disabled]="!primaryForm.valid" class="btn btn-primary ">Submit</button>
我有一个表单,其中会显示一些字段以防问题得到回答YES.Thus,如果答案为“是”,则必须验证这些表单控件。 但是在我的表格中发生的是,如果我没有填写这些字段,表格就会变得无效。这是我的代码:
<label for="DSYesNo"><h3> Does you need to access other Data? </h3> </label>
<div *ngFor="let obj of yesNoArray">
<input type="radio" class="form-control" name="DSYesNo" value="{{obj}}" formControlName="DSYesNo" (change)="DSYesNO(obj)">
{{obj}}
</div>
<div *ngIf='allDSflag'> // allDSflag by default is false.
<div form="form-group">
<label for="allDS"><h3> Data Subject Category: </h3> </label>
<div [ngClass]="{
'has-errors': ((primaryForm.controls.allDS.errors (primaryForm.controls.allDS.dirty || primaryForm.controls.allDS.touched)) ),
'has-success': (!primaryForm.controls.allDS.errors) }">
<div *ngFor="let DScategory of allDataSubjects">
<input type="checkbox"
formControlName="allDS"
name="allDS"
(click)="onOtherDataSubjectClick(DScategory)"
>
{{DScategory.category}}
</div>
<!--Validations-->
<ul class="help-block">
<li *ngIf="primaryForm.controls.allDS.errors?.requiredTrue &&
(primaryForm.controls.allDS.dirty || primaryForm.controls.allDS.touched)">This field is required</li>
</ul>
</div>
这是我检查无线电的选择值以设置标志的地方。
DSYesNO(value) {
console.log(value);
if (value=="Yes") {
this.allDSflag = true
} else
this.allDSflag = false;
}
这里是我创建表单的地方:
createForm() {
this.primaryForm = this.formBuilder.group({
DSYesNo: [],
allDS:['', Validators.compose([
Validators.requiredTrue
])],
justifyOtherDS: ['', Validators.compose([
Validators.required
])]
}
这里是提交 bottn,只要表单无效就必须禁用它:
<input type="submit" class="btn btn-primary" [disabled]="((!primaryForm.valid) && !allDSflag)" value="Submit" />
你能帮我理解是什么让按钮总是禁用吗?有人吗?
如果您想根据其他字段的值验证字段,您可以订阅字段的 ValueChanges Observable,然后设置或取消设置验证器。
this.primaryForm.get('DSYesNo')
.valueChanges
.subscribe(value => {
const otherFiled = this.primaryForm .get('otherField');
if(value==='YES'){
otherFiled.enable();
otherFiled.setValidators([Validators.required]);
} else {
otherFiled.disable()
otherFiled.clearValidators();
}
});
对于禁用按钮,只需检查表单是否有效
<button type="submit" [disabled]="!primaryForm.valid" class="btn btn-primary ">Submit</button>