Issue
I am trying to write a component that provides a reusable custom radio input field. I have created a real simple sample in StackBlitz that I hope communicates what I am trying to do. This simple app does not work as expected and I have not yet figured out why. Would love someone else's eyes on this.
The custom radio component's html
<div [formGroup]="frm">
<label [for]="id">
<input [id]="id" type="radio" [value]="value" [formControlName]="cn">{{label}}
</label>
</div>
Custom radio component's typescript
import { Component, Input } from "@angular/core";
import { FormGroup } from "@angular/forms";
@Component({
selector: 'app-radio',
templateUrl: './radio.component.html',
styleUrls: ['./radio.component.css']
})
export class RadioComponent {
@Input() frm: FormGroup;
@Input() label: string;
@Input() cn: string;
@Input() value: string;
@Input() id: string;
}
HTML where custom radio component is being used
<form [formGroup]="frm">
<app-radio id="rc1" [frm]="frm" label="Yes" value="Yes" cn="question" ></app-radio>
<app-radio id="rc2" [frm]="frm" label="No" value="No" cn="question"></app-radio>
</form>
<hr>
<h3>Form Data</h3>
<pre>{{frm.value | json}}
Typescript for html using the custom radio component
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
frm: FormGroup;
constructor(private fb: FormBuilder){}
ngOnInit() {
this.frm = this.fb.group({
question: ['Yes', Validators.required]
});
}
}
Expected Behavior
Expect the following initial screen:
- When I click on the No radio after initial screen, the Yes radio gets unchecked and the No radio gets checked.
- When I click on the No radio after initial screen, the form data shows that the question property has a value of "No".
- Subsequent option clicks unchecks the other option and checks the clicked option.
- Subsequent option clicks change the form value for question field.
Actual Behavior
- Success
- Failed. Both options are checked.
- Success
- Failed. Nothing seems to happen when I click on either option.
- Failed. Nothing seems to happen when I click on either option.
Other Observations I was surprised to not find value and name attributes on the resulting input elements as seen in a screenshot I took from Chrome Dev Tool:
I would be so grateful if someone could lend me some help. Thank you.
Solution
Here's an updated StackBlitz that I believe fulfills your behavior expectations.
I've added [checked]="frm.get(cn).value === value"
.
radio.component.html
<div [formGroup]="frm">
<label [for]="id">
<input [id]="id" type="radio" [value]="value" [formControlName]="cn" [checked]="frm.get(cn).value === value">{{label}}
</label>
</div>
I'm still doing a bit of digging myself, but I suspect the issue is that the outer formGroup
directive in app.component.html
can't locate the nested radio inputs created by RadioComponent
.
Answered By - OSH
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.