I am building reactive forms form in angular. I have simple radio button with gender name:
this._form = this._formBuilder.group({
gender: ['', Validators.required]
});
Template:
<div class="form-group">
<h4>What is your gender?</h4>
<div class="form-group">
<label class="custom-control custom-radio">
<input value="male" name="gender" type="radio" class="custom-control-input" formControlName="gender">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Male</span>
</label>
<label class="custom-control custom-radio">
<input value="female" name="gender" type="radio" class="custom-control-input" formControlName="gender">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Female</span>
</label>
<app-field-error-display [displayError]="formValidationService.IsFieldInvalid(_form,'gender','required')" errorMsg="Field is required"></app-field-error-display>
</div>
</div>
I can access the control field by name like this:
public GetControl(form: FormGroup, field: string){
return form.get(field);
}
Based on this how do I access the attribute value of type="radio"? I want to know if input control is of type radio.
A simple one, also provides intellisense
too
Typescript
// declare a form with properties i.e. name
this.form = this.formBuilder.group({
name: ['', Validators.required]
});
// create getter for form-property i.e.
get Name(): AbstractControl {
return this.form.get('name')
}
HTML
<input type="text" [formControl]="Name">
{{Name.value}} // your can see your input name here
you can access the value by using this code in your component
let genderValue = this._form.value.gender;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With