Question

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

 <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
        ])]
        }

这是提交表单，必须在表单无效的情况下将其禁用：

 <input  type="submit"  class="btn btn-primary" [disabled]="((!primaryForm.valid) && !allDSflag)" value="Submit" />

请帮助我了解是什么使该按钮始终处于禁用状态。有人吗？

Answer 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>

角度表单控件根据单选按钮选择进行验证

1 个答案: