Question

我有一个带有一些单选按钮的反应式表单，如果未选择另一个，则想使其中一个成为必需。

template.html

<div class="delivery-container">
  <form [formGroup]="deliveryForm">
    <mat-radio-group
      aria-label="Select delivery method"
      formControlName="deliveryMethods"
    >
      <mat-radio-button
        class="delivery-container__delivery-method"
        [value]="delivery"
        [checked]="delivery.checked"
        name="delivery.name"
        *ngFor="let delivery of deliveryMethods"
        formControlName="deliveryMethods"
        >{{ delivery.label }}
      </mat-radio-button>
    </mat-radio-group>
    <div>
      <ng-container *ngIf="!shouldDisplayPersonalPickupOptions()">
        <mat-form-field>
          <mat-label>Select delivery Country</mat-label>
          <mat-select formControlName="deliveryCountry">
            <mat-option
              [value]="delivery"
              *ngFor="let delivery of nonPersonalDeliveries"
            >
              {{ delivery.description }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </ng-container>
    </div>
    <ng-container *ngIf="shouldDisplayPersonalPickupOptions()">
      <mat-radio-group
        aria-label="Select personal pickup"
        formControlName="personalDeliveryAddress"
        class="personal-pickup-container"
      >
        <mat-radio-button
          class="personal-pickup-container__personal-method"
          *ngFor="let delivery of personalDeliveries"
          [value]="delivery.description"
        >
          <span> {{ delivery.description }}</span>
          <div>Delivery cost: {{ delivery.price }}</div>
        </mat-radio-button>
      </mat-radio-group>
      <p>Selected personal pickup: {{ selectedPersonalPickup }}</p>
    </ng-container>
  </form>
</div>
<span>{{ deliveryForm.value | json }}</span>
<span>Form is valid: {{ deliveryForm.valid }}</span>
<p>Country: {{ selectedCountry | json }}</p>
<!-- <p>{{nonPersonalDeliveries | json}}</p> -->

// component.ts

  deliveryMethods: IDeliveryMethods[] = [
    { label: 'Personal pickup', id: 1, checked: true, name: 'personal' },
    { label: 'Delivery', id: 2, checked: false, name: 'delivery' },
  ];

  public deliveryForm = this.formBuilder.group({
    deliveryMethods: [this.deliveryMethods[0], [Validators.required]],
    personalDeliveryAddress: ['', [Validators.required]],
    deliveryCountry: ['', [Validators.required]],
  });

我的情况是：

预先选择的是“个人接送”
显示两个带有个人提货地址的单选按钮

应该选择其中之一以使整个deliveryForm有效->即使检查了这两个无线电btn中的任何一个，该部分也无法使用，并且该表单也被标记为有效。

如果选择了投放选项

显示带有其他地址的下拉列表->在选择一个选项之前，表单不应该有效

因此，该表格仅在选择了个人地址或从下拉列表中发送时才有效。

正在尝试为personalDeliveryAddress设置setValidator，但是它不起作用

  observeDeliveryForm() {
    const personalDeliveryAddressControl = this.deliveryForm.get(
      'personalDeliveryAddress'
    );
    const deliveryCountryControl = this.deliveryForm.get('deliveryCountry');
    const deliveryMethodsControl = this.deliveryForm.get('deliveryMethods');
    this.deliveryForm.valueChanges
      .pipe(takeUntil(this.destroySubject))
      .subscribe((data) => {
        this.selectedDelivery = data.deliveryMethods;
        this.selectedCountry = data.deliveryCountry;
        if (this.selectedDelivery.id === 1) {
          personalDeliveryAddressControl.setValidators([Validators.required]);
          deliveryCountryControl.setValidators(null);
        }
      });
  }

角反应式单选按钮验证器

0 个答案: