Angular Input type radio doesn't recognize attributes

Question

I have a multiple inputs form, all of them are type radio button. I need to set "required" and "checked by default" attributes, problem is Angular is not recognizing any of these. Trying to have a default checked item, I've already tried: using checked, checked=true, checked="true", [checked]="true", [checked]="{1 ==1}" ...

None has worked so far. And it's the same with "required".

Maybe is there anything I have to do on the TypeScript side? I'm using Angular 9, more specific @angular-devkit/core": "9.0.6"

Here is a little example of what I'm doing:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tables',
  templateUrl: './perso.component.html',
  styleUrls: ['./perso.component.css']
})
export class PersoComponent implements OnInit {
    q1: number;
    
process() {
      console.log(this.q1);
      }
      
      }

<form>
                        <div class="row">
                            <p>1. I am the life of the party:</p>
                                <label><input type="radio" name="q1" value="1" [(ngModel)]="q1" required>Very Inaccurate</label>
                                <br><label><input type="radio" name="q1" value="2" [(ngModel)]="q1">Inaccurate</label>
                                <br><label><input type="radio" name="q1" value="3" [(ngModel)]="q1"  checked="true">Neither Accurate Nor Inaccurate</label>
                                <br><label><input type="radio" name="q1" value="4" [(ngModel)]="q1">Moderately Accurate</label>
                                <br><label><input type="radio" name="q1" value="5" [(ngModel)]="q1">Very Accurate</label>
{{'\nValue of q1: '+q1}}
                            <hr>
                        </div>
<button
                                type="submit"
                                class="btn btn-info btn-fill pull-right"
                                (click)="process()"
                        >Process</button>
                        <div class="clearfix"></div>
                    </form>

Thanks in advance for your help

Answer 1

Try using [value] instead value.

<form>
    <div class="row">
        <p>1. I am the life of the party:</p>
        <label>
      <input type="radio" name="q1" [value]="1" [(ngModel)]="q1" required #q1Answer="ngModel">
      Very Inaccurate</label>
        <br><label>
      <input type="radio" name="q1" [value]="2" [(ngModel)]="q1">
      Inaccurate</label>
        <br><label>
      <input type="radio" name="q1" [value]="3" [(ngModel)]="q1">
      Neither Accurate Nor Inaccurate</label>
        <br><label>
      <input type="radio" name="q1" [value]="4" [(ngModel)]="q1">
      Moderately Accurate</label>
        <br><label>
      <input type="radio" name="q1" [value]="5" [(ngModel)]="q1">
      Very Accurate</label>
        {{'\nValue of q1: '+q1}}
        <hr>
    </div>
    <button [disabled]="q1Answer.errors"
                                type="submit"
                                class="btn btn-info btn-fill pull-right"
                                (click)="process()"
                                [innerText]="(q1Answer.errors) ? 'Choose your answer' : 'Process'"
                        ></button>
    <div class="clearfix"></div>
</form>

Answer 2

Problems is with ngModel and value. You haven't set a value to q1 variable so neither radio button value attribute matches the value in ngModel and therefore neither radio button should be checked. You must give q1 a value in your component. Also is important to consider that if you have value set like value="1" in your html Angular will interpret that as a string so q1 must be also a string in your component like q1="1". If you need to set q1 to some non-string value you must use [value]="non-string-value" in your html for example [value]="1" (number) or [value]="true" (boolean)

Answer 3

Hellow, seems like you have to set first default values for the one you want to start checked and use directive ngModel on this way:

<input id="male" type="radio" class="custom-control-input" value="male" name="gender" [ngModel]="gender" required checked>
<label class="custom-control-label" for="male">Male</label>

<input id="female" type="radio" class="custom-control-input" value="female" name="gender" [ngModel]="gender" required>
<label class="custom-control-label" for="female">Female</label>

and on component.ts u can initialize the default values

gender: string = "female";

With this sintax required is working too.

I have the code on here: https://stackblitz.com/edit/angular-radio-buttons-demo-template-driven-form-utczgn

Wich it's a fork from here: https://stackblitz.com/edit/angular-radio-buttons-demo-template-driven-form