I am using a form in Angular 6, and I am disabling the submit button on this condition:
<button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.form.valid || !quantityIsValid(newQuantity.value)">Save</button>
I have 2 mat-radio-button
fields inside a mat-radio-group
, and I want to disable the submit button if none of the radio buttons are selected.
Here is what I tried:
<form #EditItemForm="ngForm" (ngSubmit)="save(newQuantity.value)">
<mat-radio-group>
<mat-radio-button (click)="setType('Consumable')" value="1" #consumable name="consumable" required>Consumable</mat-radio-button>
<mat-radio-button (click)="setType('Returnable')" value="2" #returnable name="returnable" required>Returnable</mat-radio-button>
</mat-radio-group>
<mat-form-field>
<input matInput [ngModel]="data.quantity" name="newQuantity" #newQuantity placeholder="Quantity"
type="number" required>
</mat-form-field>
<mat-dialog-actions>
<button tabindex="-1" mat-raised-button [mat-dialog-close]="false">Cancel</button>
<button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.form.valid || !quantityIsValid(newQuantity.value)">Save</button>
</mat-dialog-actions>
</form>
So I've made the mat-radio-buttons required, I've also tried making the mat-radio-group required but both don't work.
However, if I don't select a radio button, and I type in a quantity, the form will appear to be valid and it will enable the submit button. But, I don't want the submit button to be enabled when there's no radio button selected so how can I do this?
Thanks
Validating Material Radio Button For validating the Material radio button, we'll add a class dynamically to the radio button group. The class will be added once, the form is submitted and the radio button value is invalid or not selected. NgForm directive helps in detecting whether the form is submitted.
There should not be an input element without a form element. You are not going to get the HTML to respond the way you want it to if you do not use it correctly. Multiple submit buttons would indicate the need for multiple forms.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.
You have to add a ngModel
& name
to your mat-radio-group
. Als make the group required instead of the mat-radio-buttons
:
<form #EditItemForm="ngForm" (ngSubmit)="save(1)">
<mat-radio-group required [ngModel]="selectedRadio" name="radio">
<mat-radio-button (click)="setType('Consumable')" value="1">Consumable</mat-radio-button>
<mat-radio-button (click)="setType('Returnable')" value="2">Returnable</mat-radio-button>
</mat-radio-group>
<button tabindex="-1" mat-raised-button class="submit-btn" color="primary" type="submit" [disabled]="!EditItemForm.valid">Save</button>
</form>
<p>Form valid: {{ EditItemForm.valid }}</p>
I excluded the quantity
control for simplicity. The selectedRadio
is just a string
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