FormGourp 的至少一个控件有效以启用提交表单
At Least One Control of FormGourp is valid to enable submit form
我的 FormGroup 上有两个控件我需要至少验证两个控件之一才能提交表单
如果只有一个 FormControl 有效,我需要 formGroup 有效
this.form = this.fb.group({
'keyWord' : new FormControl(null, [
Validators.required,
Validators.minLength(4)
]),
'name': new FormControl(null, [
Validators.required
])
});
html
<form [formGroup]="form" (ngSubmit)="isPending=!isPending;searchCriteria(form.value);" class="form-group" novalidate>
<small class="text-danger" *ngIf="?????">At Least One Field is required</small>
<div class="input-group box-shadow">
<div class="input-group-addon border-top-0 border-left-0 border-bottom-0 rounded-0">
<i class="fa fa-search"></i>
</div>
<input type="text" formControlName="keyWord" placeholder="" class="form-control border-0">
<input type="text" formControlName="name" placeholder="" class="form-control border-0">
<button type="submit" value="submit">
</form>
将提交按钮禁用属性作为表单有效性的函数
<button type="submit" value="submit" [disabled]="(!form.get('keyWord').valid) && (!form.get('name').valid) ">
首先,我们使用 <form name>.get('<member name>')
访问特定的表单控件
然后,我们使用布尔逻辑如下
一开始都是无效的,所以 disabled 为真,因为当它们无效时,valid 为 0,我们将其取反为 1。所以 1 || 1 = 1,如果一个有效,则有效为1,!有效为0,所以我们最终得到0 || 1 = 0,我们忽略其余部分。
你可以试试这个
<form [formGroup]="form" (ngSubmit)="isPending=!isPending;searchCriteria(form.value);" class="form-group" novalidate>
<small class="text-danger" *ngIf="?????">At Least One Field is required</small>
<div class="input-group box-shadow">
<div class="input-group-addon border-top-0 border-left-0 border-bottom-0 rounded-0">
<i class="fa fa-search"></i>
</div>
<input type="text" formControlName="keyWord" placeholder="" class="form-control border-0">
<input type="text" formControlName="name" placeholder="" class="form-control border-0">
<button type="submit" value="submit" [disabled]="isvalid()">
</form>
组件函数
isValid(): boolean {
if(this.form.get('keyWord').valid ||this.form.get('name').valid){
retrun false;
}
return true;
}
我的 FormGroup 上有两个控件我需要至少验证两个控件之一才能提交表单
如果只有一个 FormControl 有效,我需要 formGroup 有效
this.form = this.fb.group({
'keyWord' : new FormControl(null, [
Validators.required,
Validators.minLength(4)
]),
'name': new FormControl(null, [
Validators.required
])
});
html
<form [formGroup]="form" (ngSubmit)="isPending=!isPending;searchCriteria(form.value);" class="form-group" novalidate>
<small class="text-danger" *ngIf="?????">At Least One Field is required</small>
<div class="input-group box-shadow">
<div class="input-group-addon border-top-0 border-left-0 border-bottom-0 rounded-0">
<i class="fa fa-search"></i>
</div>
<input type="text" formControlName="keyWord" placeholder="" class="form-control border-0">
<input type="text" formControlName="name" placeholder="" class="form-control border-0">
<button type="submit" value="submit">
</form>
将提交按钮禁用属性作为表单有效性的函数
<button type="submit" value="submit" [disabled]="(!form.get('keyWord').valid) && (!form.get('name').valid) ">
首先,我们使用 <form name>.get('<member name>')
然后,我们使用布尔逻辑如下 一开始都是无效的,所以 disabled 为真,因为当它们无效时,valid 为 0,我们将其取反为 1。所以 1 || 1 = 1,如果一个有效,则有效为1,!有效为0,所以我们最终得到0 || 1 = 0,我们忽略其余部分。
你可以试试这个
<form [formGroup]="form" (ngSubmit)="isPending=!isPending;searchCriteria(form.value);" class="form-group" novalidate>
<small class="text-danger" *ngIf="?????">At Least One Field is required</small>
<div class="input-group box-shadow">
<div class="input-group-addon border-top-0 border-left-0 border-bottom-0 rounded-0">
<i class="fa fa-search"></i>
</div>
<input type="text" formControlName="keyWord" placeholder="" class="form-control border-0">
<input type="text" formControlName="name" placeholder="" class="form-control border-0">
<button type="submit" value="submit" [disabled]="isvalid()">
</form>
组件函数
isValid(): boolean {
if(this.form.get('keyWord').valid ||this.form.get('name').valid){
retrun false;
}
return true;
}