Angular 输入类型收音机无法识别属性

Question

我有一个多输入表单，它们都是类型单选按钮。我需要设置 "required" 和 "checked by default" 属性，问题是 Angular 无法识别其中任何一个。尝试使用默认选中项，我已经尝试过：使用 checked, checked=true, checked="true", [checked]="true", [checked]="{1 ==1}" ...

None 到目前为止有效。 "required".

也一样

也许我需要在 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";

要求的这个语法也有效。

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

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

Angular 输入类型收音机无法识别属性

Angular Input type radio doesn't recognize attributes

html

radio-button

angular