как сделать форму действительной, если щелкнуть переключатель, в котором есть обязательное поле, и щелкнуть другой переключатель и указать значение в этом поле

Question

У меня есть форма, которая работает нормально, но я сталкиваюсь с проблемой, если я нажму переключатель с клиентом, он добавит поле с именем select client с выпадающим списком, но снова я переключаю переключатель с клиента на поставщика, теперь это будет покажите поле ввода поставщика, где я ввожу значение и продолжаю, когда я пытался отправить форму, все еще отключен, я нашел, в чем проблема, но я не мог найти точное решение. проблема в том, что я нажал на радио клиента Кнопка с обязательным для заполнения полем формы все еще отключена. Кто-нибудь может решить эту проблему.

<!-- 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. Сначала удалите required из html

<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