Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make mat-radio-button a required field in a form

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

like image 320
Michael Avatar asked Aug 01 '18 12:08

Michael


People also ask

How to validate radio button in Angular material?

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.

Do radio buttons need to be in a form?

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.

How do I select one Radiobutton at a time in HTML?

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.


1 Answers

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

like image 199
Tim Martens Avatar answered Oct 21 '22 17:10

Tim Martens