Angular Радио типа ввода не распознает атрибуты

Question

У меня есть форма с несколькими входами, все они имеют переключатель типа. Мне нужно установить атрибуты required и флажок по умолчанию, проблема в том, что Angular не распознает ни один из них. Пытаясь получить проверенный элемент по умолчанию, я уже пробовал: используя зарегистрированный, проверенный = истинный, проверенный = "истинный", [проверенный] = "истинный", [проверенный] = "{1 == 1}" ...

Пока ничего не получалось. И то же самое с «required».

Может быть, я должен что-то сделать на стороне TypeScript? Я использую Angular 9, более конкретно c @ angular -devkit / core ":" 9.0.6 "

Вот небольшой пример того, что я делаю:

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>

Заранее благодарен за помощь

Answer 1

Проблемы с ngModel и value. Вы не установили значение переменной q1, поэтому ни один атрибут переключателя value не соответствует значению в ngModel, и поэтому ни один переключатель не должен быть отмечен. Вы должны дать q1 значение в вашем компоненте. Также важно учитывать, что если в вашем html значение установлено как value="1", он будет интерпретировать это как string, поэтому q1 также должна быть строкой в ​​вашем компоненте, например q1="1". Если вам нужно установить q1 на какое-то нестроковое значение, вы должны использовать [value]="non-string-value" в вашем html, например [value]="1" (number) или [value]="true" (boolean)

Answer 2

Привет, похоже, вам нужно установить первые значения по умолчанию для того, который вы хотите запустить, проверил и использовать директиву ngModel следующим образом:

<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>

и component.ts вы можете инициализировать значения по умолчанию

gender: string = "female";

С этим необходимым синтаксисом тоже работает.

У меня есть код здесь: https://stackblitz.com/edit/angular-radio-buttons-demo-template-driven-form-utczgn

который является вилкой из здесь: https://stackblitz.com/edit/angular-radio-buttons-demo-template-driven-form

Answer 3

Попробуйте использовать [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>