Question

我有一个Angular反应形式，我在其中使用了两个单选按钮。 1）是，单击“是”，打开表单，该表单需要正确验证，并且在表单验证之前，按钮不会启用

2）否，单击否，按钮将启用。

因此仅启用按钮===（单击“是”并填写表格）|| （单击否）

下面是我的代码，我在犯一些错误，请告诉我

    <form  class="flex flex-column flex-row-ns flex-wrap" [formGroup]="basicInfoForm">
      <mat-radio-group class="mt4 inline-flex flex-column">
        <mat-radio-button value="1" (click)="fillInfo = true">Yes, import my information</mat-radio-button>

          <mat-form-field *ngIf="fillInfo" color="primary" class="w-50-ns pr2-ns">
            <mat-label>Social Security Number</mat-label>
            <input matInput placeholder="xxx-xx-xxxx" max="10" formControlName="ssn" required />

          </mat-form-field>

          <mat-form-field *ngIf="fillInfo" class="w-50-ns pr2-ns">
            <mat-label>Phone Number</mat-label>
            <input matInput placeholder="(xxx) xxx-xxxx" required formControlName="phoneNumber" />

          </mat-form-field>
     <mat-radio-button value="2" class="mt4" (change)="fillInfo= false; enableContinue = true;">No thanks, I'll fill out the form myself</mat-radio-button>
      </mat-radio-group>
<button mat-flat-button color="primary" class="w-100" type="submit"
              [disabled]="basicInfoForm.valid=== false || enableContinue === false">Continue</button>
    </form>
<!-- below button working for one condition only, not accepting or condition-->
 <button mat-flat-button color="primary" class="w-100" (click)="invisible.execute(); next();" type="submit"
          [disabled]="(basicInfoForm.valid=== false )|| (fillInfo=== false)">Continue</button>

与布尔值相关的ts代码是

fillInfo: boolean = false;
    basicInfoForm: FormGroup;
    enableContinue:boolean = false;

Answer 1

Sahil Kkr，主要问题是您没有反应式。好吧，我们将创建一个ReactiveForm。我在构造函数中注入FormBuilder

  constructor(private fb: FormBuilder) { }

并创建一个formGroup

  basicInfoForm = this.fb.group({
    ssn: ['', Validators.required],
    phoneNumber: ['', Validators.required]
  });

我们可以添加一个FormControl来管理“收音机”或使用[（ngModel）]

  moreInfo=new FormControl('1');
  //or
  moreInfo:number=1

如果basicInfoForm无效且moreInfo！= 2，则按钮将被禁用-如果moreInfo.value！= 2，则使用FormControl-

 <button mat-flat-button color="primary" class="w-100" type="submit"
              [disabled]="!basicInfoForm.valid && moreInfo!=2">Continue</button>

然后我们可以再次使用moreInfo-或moreInfo.value-隐藏附加输入。

重要提示：如果我们使用[（ngModel）]，则必须添加[ngModelOptions] =“ {standalone：true}”，因为输入内容位于“表单”内

重要2：删除输入中的“必需”。我们正在使用验证器。创建formGroup时需要

重要3：表单确实无效

<form [formGroup]="basicInfoForm">
    <mat-radio-group [(ngModel)]="moreInfo" [ngModelOptions]="{standalone: true}">
        <mat-radio-button value="1">
            Yes, import my information
        </mat-radio-button>
         <!--see that simply make not visible using a *ngIf="modeInfo==1"-->
        <mat-form-field *ngIf="moreInfo==1" color="primary" >
            <mat-label>Social Security Number</mat-label>
            <input matInput placeholder="xxx-xx-xxxx" max="10" 
                 formControlName="ssn"  />
        </mat-form-field>

    <mat-form-field *ngIf="moreInfo==1" >
            <mat-label>Phone Number</mat-label>
            <input matInput placeholder="(xxx) xxx-xxxx"   formControlName="phoneNumber" />
          </mat-form-field>

     <mat-radio-button value="2" >
         No thanks, I'll fill out the form myself</mat-radio-button>
      </mat-radio-group>
    <button mat-flat-button color="primary" type="submit"
              [disabled]="!basicInfoForm.valid && moreInfo!=2">
        Continue
    </button>
</form>

在stackblitz中，您有两个选择（在代码中，我删除了该类以阐明代码）

*已更新如果我们希望formGroup有效或无效，我们可以考虑在响应式表单中，如果控件被“禁用”，Angular不会尝试验证表单。

要解决两个问题。我们不能使用物料输入中的[disabled]属性，必须使用禁用和启用FormControl的方法，其次是不能同时禁用FormGroup的所有字段。因此，我们可以使用使用FormControl来管理“ moreInfo”并向FormGroup添加“ fool”属性的选项在ngOnInit

  ngOnInit() {
    this.moreInfo2.valueChanges.subscribe(res => {
      if (res == 1) {
        this.basicInfoForm2.controls.ssn.enable();
        this.basicInfoForm2.controls.phoneNumber.enable();
      }
      else {
        this.basicInfoForm2.controls.ssn.disable();
        this.basicInfoForm2.controls.phoneNumber.disable();

      }
    })
  }

还有我们的表格

  basicInfoForm2 = this.fb.group({
    ssn: ['', Validators.required],
    phoneNumber: ['', Validators.required],
    fool: ''
  });

禁用按钮或条件

1 个答案: