Angular Input 类型的收音机无法识别属性

Question

我有一个多输入表单，它们都是类型单选按钮。 我需要设置“必需”和“默认检查”属性，问题是 Angular 无法识别其中任何一个。 试图有一个默认的检查项目，我已经尝试过： 使用检查，检查=真，检查=“真”，[检查]=“真”，[检查]=“{1 ==1}”...

到目前为止，还没有任何工作。 “必填”也是一样。

也许我在 TypeScript 方面需要做些什么？ 我正在使用 Angular 9，更具体的 @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

尝试使用[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

问题在于ngModel 和value。您尚未为 q1 变量设置值，因此单选按钮 value 属性与 ngModel 中的值都不匹配，因此不应选中任何单选按钮。你必须在你的组件中给q1 一个值。同样重要的是要考虑，如果您在 html 中设置了类似 value="1" 的值，Angular 会将其解释为 string，因此 q1 也必须是组件中的字符串，例如 q1="1"。如果您需要将q1 设置为某个非字符串值，则必须在您的html 中使用[value]="non-string-value"，例如[value]="1" (number) 或[value]="true" (boolean)

Answer 3

您好，您似乎必须为要开始检查的那个设置第一个默认值并以这种方式使用指令 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";

这个sintax required 也可以工作。

我这里有代码：https://stackblitz.com/edit/angular-radio-buttons-demo-template-driven-form-utczgn

这是从这里分叉的：https://stackblitz.com/edit/angular-radio-buttons-demo-template-driven-form