CODEWITHSUNDEEP
angular
KnowledgeSeeker001
KnowledgeSeeker001

Reputation: 638

All of my radio buttons in the radio button group get selected when i select on of them?

Hi I am having an angular 5 project. In one of the component i have a 3 radio buttons and when i select one of them all of them get checked . Not sure what is happening .

enter image description here

After I select the radio button internal all of the radio buttons get selected as shown below. enter image description here

the following is my formgroup declaration the component.ts file

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 },[]]
});

and below is the component html code.

 <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>

Not sure what is happenening it looks good to me .please help to trouble shoot this issue.

thanks

Upvotes: 0

Views: 1836

Answers (1)

Ininiv
Ininiv

Reputation: 1325

Change [value] to value

   <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

>

Upvotes: 1

Related Questions