I'm a beginner with Angular and facing an issue with showing radio buttons based on server response. The 'checked' attribute seems to not work as expected.
My goal is to display two radio buttons under one label - "Allow" and "Deny". The server response looks like this: {"math": true, "science": false, "language": true}. I want the 'Allow' radio button checked for all true values and the 'Deny' button checked for false value. This is what I've been attempting:
radio-button.component.html
<form [formGroup]= subjectGroup (ngsubmit)="onSubmit()">
<div class="form-group row">
<label for="maths" class="col-sm-4 col-form-label text-dark">
<b>Maths</b></label>
<div class="form-check form-check-inline">
<input id="allow" type="radio" value="allow" name="screenCapture" formControlName="mathsValue"(click)="changeValue('maths', true)" checked="'response.maths' == true">
<label for="allow">Allow</label>
</div>
<div class="form-check form-check-inline">
<input id="deny" type="radio" value="deny" name="screenCapture" formControlName="mathsValue" (click)="changeValue('maths', false)"
checked="'response.maths' == false">
<label for="deny">Deny</label>
</div>
</div>
<button class="btn btn-success>Update</button>
radio-button.component.ts
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-radio-button',
templateUrl: './radio-button.component.html',
styleUrls: ['./radio-button.component.css']
})
export class RadioButtonComponent implements OnInit {
public response;
public subjectGroup: FormGroup;
ngOnInit(): void {
this.getResponse();
this.form();
}
getResoponse(){
// Storing all the server response data in a global variable (response)
}
form(){
this.subjectGroup = this.fb.group({
maths: new FormControl('')
})
changeValue(e, value) {
(this.response[e]) = value
}
}
I need help with code snippets for correctly checking the 'Allow' button for true values and the 'Deny' button for false values in Angular.