support for required radio buttons in angular material

[sarora2073]

I'm submitting a

[ ] Bug / Regression
[x] Feature Request / Proposal

I'm using

NG Dynamic Forms Version: `9.0.1`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[x] Material  
[ ] NG Bootstrap
[ ] Prime NG

Description

Hi,

I noticed that mat-radio-group doesn't support the required attribute, so out of necessity i made the change in my own branch. Glad to do a PR for this if you want it in master branch, but wanted to run the implementation by you first.

1. in dynamic-material-radio-group.component.html

simply added [required]="model.required" to the mat-radio-group tag

2. in dynamic-material-form-control-container.component.html (to ensure * appears by label, so end user knows the input is required)

Before <label *ngIf="!hasMatFormField && !isCheckbox && hasLabel" [for]="elementId" [innerHTML]="model.label" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>

After: <label *ngIf="!hasMatFormField && !isCheckbox && hasLabel" [for]="elementId" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"> {{ model.label }} <span *ngIf="model.required"> *</span> </label>

I'm not sure if you feel it's appropriate to make the 2nd change since it will affect labels globally, not just for radio buttons. If you don't think a global change is appropriate, then i guess the controls would have to be refactored to put labels in individuals controls as necessary e.g. add label to dynamic-material-radio-group.component.html specifically.

Regards,

-S. Arora

[Karamuto]

Hello @sarora2073 ,

I have never even thought about making a radio group "required". Because you would usually pre select one of the values to force a user interaction. I guess thats usually the way people do this.

That would at least explain why material does not have a default way of doing this.

[sarora2073]

Hi,

Just to be clear, angular material does have a way to do this..and i've implemented it in my own version as per code above which works. Since its a few lines of change I thought it might be a quick improvement worth making in the master branch (if it's okay to make it as a global change to all labels -- that's the part I'm unsure about how other controls use that label field, and if adding an asterik globally makes sense or not).

As for use cases, one simple example would be a multiple choice questionaire... where you don't want to pre-select the answer but it maybe required to complete.

-S. Arora

[udos86]

@sarora2073 Thanks for your proposal.

I'll add the missing binding with the next patch version.

[sarora2073]

Thanks @udos86 !

[begandroide]

@sarora2073 hi! do you have implemented a custom form control for this? Because i have a radio group required and the validation required is showe on init, whitout touch the control. your approach solve my issue?

[sarora2073]

it's been a while, but i think all i did was in dynamic-material-radio-group.component.html i just added the following property binding:

[required]="model.required"

I don't know if that particular file has changed since i pulled the code, but here's what my version looks like:

<ng-container [formGroup]="group">

    <mat-radio-group class="vert-radio-group mb-8" #matRadioGroup
                     [formControlName]="model.id"
                     [id]="id"
                     [labelPosition]="model.getAdditional('labelPosition', 'after')"
                     [name]="model.name"
                     [ngClass]="[getClass('element', 'control'), getClass('grid', 'control')]"
                     [required]="model.required"
                     (blur)="onBlur($event)"
                     (change)="onChange($event)"
                     (focus)="onFocus($event)">

        <mat-radio-button *ngFor="let option of model.options$ | async"
                          [name]="model.name"
                          [ngClass]="getClass('element', 'option')"
                          [value]="option.value"><span [innerHTML]="option.label"></span></mat-radio-button>

    </mat-radio-group>

</ng-container>

hope that helps.