Reputation: 638
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 .
After I select the radio button internal all of the radio buttons get selected as shown below.
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
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