当我选择单选按钮组中的所有单选按钮时,它们都会被选中?

时间:2019-12-02 12:23:06

标签: angular

嗨,我有一个5号角项目。在其中一个组件中,我有3个单选按钮,当我选择其中一个时,都会选中它们。 不知道发生了什么。

enter image description here

选择内部单选按钮后,所有单选按钮均被选中,如下所示。 enter image description here

以下是我的表单组声明component.ts文件

this.formGroup = this.fb.group({
  accountType: [
    { value: 'INTERNAL', disabled: !this.isTypeEditable },
    [Validators.required]
  ],
  name: ['', [Validators.required]],
  firstName: [
    { value: '', disabled: !this.showAdminFields },
    [Validators.required]
  ],
  lastName: [
    { value: '', disabled: !this.showAdminFields },
    [Validators.required]
  ],
  email: [
    { value: '', disabled: !this.showAdminFields },
    [Validators.required, Validators.email]
  ],
  address1: [{ value: '', disabled: true }, [Validators.required]],
  address2: [{ value: '', disabled: true }, []],
  address3: [{ value: '', disabled: true }, [Validators.required]],
  address4: [{ value: '', disabled: true }, []],
  country: [{ value: '', disabled: true }, [Validators.required]],
  addressProfile: ['', Validators.required],
  features: this.fb.array([]),
  inventories: this.fb.array([]),
  customerId: ['',[strictAlphaNumericValidator]],
  contractId: ['',[strictAlphaNumericValidator]],
  zipCode: ['',[zipCodeValidator]],
  customerContactNumber: ['',[alphanumericValidator]],
  budget:[{value:false, disabled: false},[]],
  messagePrefix: [ '', [messagePrefixEndsWithSpaceValidator]],
  editMessagePrefix: [ { value: false, disabled: false },[]]
});

和下面是组件html代码。

 <pc-form-fields-group [label]="'LABELS.TYPE' | translate" [required]="true">

          <pc-custom-control [label]="'LABELS.INTERNAL' | translate" [inline]="true">
            <input formControlName="accountType" type="radio" [value]="INTERNAL">
          </pc-custom-control>

          <pc-custom-control [label]="'LABELS.EXTERNAL' | translate" [inline]="true">
            <input formControlName="accountType" type="radio" [value]="EXTERNAL">
          </pc-custom-control>

          <pc-custom-control [label]="'LABELS.SERVICE_PROVIDER' | translate" [inline]="true">
            <input formControlName="accountType" type="radio" [value]="SERVICE_PROVIDER">
          </pc-custom-control>

        </pc-form-fields-group>

不确定发生了什么对我来说很好。请帮助解决此问题。

谢谢

1 个答案:

答案 0 :(得分:1)

将[值]更改为值

   <pc-form-fields-group [label]="'LABELS.TYPE' | translate" [required]="true">

              <pc-custom-control [label]="'LABELS.INTERNAL' | translate" [inline]="true">
                <input formControlName="accountType" type="radio" value="INTERNAL">
              </pc-custom-control>

              <pc-custom-control [label]="'LABELS.EXTERNAL' | translate" [inline]="true">
                <input formControlName="accountType" type="radio" value="EXTERNAL">
              </pc-custom-control>

              <pc-custom-control [label]="'LABELS.SERVICE_PROVIDER' | translate" [inline]="true">
                <input formControlName="accountType" type="radio" value="SERVICE_PROVIDER">
              </pc-custom-control>

            </pc-form-fields-group

>