Angular 表单控件基于单选按钮选择进行验证答案

【问题标题】：Angular form controls validating based on radio button selectionAngular 表单控件基于单选按钮选择进行验证
【发布时间】：2018-08-08 13:29:06
【问题描述】：

我有一个表单，其中某些字段将在问题回答为“是”的情况下显示。因此，如果答案为“是”，则必须验证这些表单控件。但是在我的表格中发生的是，如果我没有填写这些字段，表格将变为无效。这是我的代码：

 <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，只要表单无效，就必须禁用它：

 &lt;input  type="submit"  class="btn btn-primary" [disabled]="((!primaryForm.valid) &amp;&amp; !allDSflag)" value="Submit" /&gt;

能否请您帮助我了解是什么使按钮始终禁用。有人吗？

【问题讨论】：

为此，您的yesNoarray 应该类似于['Yes', 'No']。你确定是这样的吗？
是的，这部分工作正常。所以我相应地显示/隐藏 div

标签： angular typescript mean-stack angular-reactive-forms angular-forms

【解决方案1】：

如果您想根据其他字段的值验证字段，您可以订阅字段的 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>

【讨论】：