FormGourp 的至少一个控件有效以启用提交表单

Question

我的 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>

Answer 1

将提交按钮禁用属性作为表单有效性的函数

<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，我们忽略其余部分。

Answer 2

你可以试试这个

<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;
    }

FormGourp 的至少一个控件有效以启用提交表单

At Least One Control of FormGourp is valid to enable submit form

angular

forms

form-control

formgroups