如果我们单击具有必填字段的单选按钮并单击另一个单选按钮并在该字段中填充值，如何使表单有效

Question

我有一个工作正常但我面临问题的表单，如果我单击客户端单选按钮，它将添加名为 select 客户端的字段和下拉列表，但我再次将单选按钮从客户端更改为供应商，现在它将显示供应商输入字段，我在其中输入值并继续，当我尝试提交表单时仍然被禁用，我发现问题出在哪里，但我无法找到确切的解决方案。问题是因为我点击了客户端单选按钮必填字段表单仍然被禁用。任何人都可以解决这个问题。

<!-- Select Client or Vendor -->
        <div fxLayout="column" class="create">
            <div class="row">
              <b>Select Client Or Vendor:</b>
              <mat-radio-group class="slip" id="select" formControlName="clientType" >
                <mat-radio-button value="client" class="example-margin">Client</mat-radio-button>
                <mat-radio-button value="vendor" class="example-margin" >Vendor</mat-radio-button>
                <mat-radio-button value="both" class="example-margin">Client/Client's Vendor</mat-radio-button>
              </mat-radio-group>
            </div>
          </div>

          <!-- Select Client -->
          <div fxLayout='column'
            *ngIf="firstFormGroup.controls['clientType'].value=='client' || firstFormGroup.controls['clientType'].value=='both'">
            <!-- Container Recieved -->
            <div fxLayout="column">
                <div class="row">
                  <b>Select Client:</b>
                  <mat-form-field  fxFlex="45"  class="showClient">
                    <mat-select fxFlex placeholder="Company Name"  #companySelect formControlName="companyId" id="companyId" class="form-control"  class="client-adjust" required>
                      <mat-option *ngFor="let company of fetchedCompany" [value]="company.id">{{company.name}}</mat-option>
                         <mat-option (click)="[loadMoreCompanies()]" style="color: blue">
                          Load More
                        </mat-option> 
                    </mat-select>
                    </mat-form-field>
                </div>
              </div>            
          </div>

          <!-- Select Vendor -->
          <div fxLayout="column" *ngIf="firstFormGroup.controls['clientType'].value=='vendor' || firstFormGroup.controls['clientType'].value=='both'">
              <div class="row">
                <b>Enter Vendor Name:</b>
                <mat-form-field class="qty-received">
                  <input matInput formControlName="vendorName" placeholder="Enter Vendor Name" id="vendorName" type="text"
                    class="form-control" required>
                </mat-form-field>
  <button *ngIf="!editMode && firstFormGroup.controls['purchaseOrder'].value == true" mat-raised-button matStepperNext size="sm" class="mat-green" [disabled]="firstFormGroup.invalid" 
          [ngClass]="{'disable':firstFormGroup.invalid}" (click)="addNewReceivables()"> Create & Continue</button>

ts

    this.firstFormGroup = this._formBuilder.group({

      clientType:[''],
      vendorName:[''],
})

Answer 1

您需要使用Custom Validators 。 首先请从 html 中删除required

<mat-select fxFlex placeholder="Company Name"  #companySelect formControlName="companyId" id="companyId" class="form-control"  class="client-adjust" required> <!-- here -->
<!-- ... -->
<input matInput formControlName="vendorName" placeholder="Enter Vendor Name" id="vendorName" type="text" class="form-control" required> <!-- and from here -->

适合您的自定义验证器

// your contructor
constructor(_formBuilder: FormBuilder) {
    this.firstFormGroup = _formBuilder.group({
          clientType: ['', Validators.required], // add Validators.required to make sure user always need to select something in radio box
          vendorName: [''],
          companyId: [''],
          purchaseOrder: [true] // I add this only for testing
    });

    this.firstFormGroup.get('clientType').valueChanges.subscribe(value => {
      if (value === 'client') {
        this.firstFormGroup.get('vendorName').clearValidators();    
        this.firstFormGroup.get('companyId').setValidators(Validators.required);
      } else if (value === 'vendor') {    
        this.firstFormGroup.get('companyId').clearValidators();
        this.firstFormGroup.get('vendorName').setValidators(Validators.required);
      } else if (value === 'both') {
        this.firstFormGroup.get('companyId').setValidators(Validators.required);
        this.firstFormGroup.get('vendorName').setValidators(Validators.required);
      } else {
        this.firstFormGroup.get('companyId').clearValidators();
        this.firstFormGroup.get('vendorName').clearValidators();
      }

      this.firstFormGroup.get('companyId').updateValueAndValidity();
      this.firstFormGroup.get('vendorName').updateValueAndValidity();
    })
   }

您可以在此处查看工作示例stackblitzExample