Angular 4 默认单选按钮默认选中

Posted 2023-03-05

【中文标题】Angular 4 默认单选按钮默认选中

【英文标题】：Angular 4 default radio button checked by default

【发布时间】：2017-10-02 12:18:12

【问题描述】：

我试图根据我从对象中获得的值将单选按钮标记为默认值，它可以是 True 或 False。根据选项，我可以做些什么来标记为默认单选按钮？

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" value="true" 
        [(ngModel)]="rule.mode"> all of the following conditions are true
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" value="false"
        [(ngModel)]="rule.mode"> at least one of the following conditions is true
</label>

我在rule.mode中设置了真假。

【问题讨论】：

[attr.checked]="role.mode"

@BharatChauhan 这是一个正确的答案，非常适合“仅初始化”设置值。谢谢！

此处为应用示例freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

请帮我解决这个问题***.com/questions/59468510/…

【参考方案1】：

您可以使用[(ngModel)]，但您需要将value 更新为[value]，否则该值将作为字符串进行评估。它看起来像这样：

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="true" [(ngModel)]="rule.mode">
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="false" [(ngModel)]="rule.mode">
</label>

如果rule.mode 为真，则选择该电台。如果它是假的，那么另一个。

真正的区别在于value。 value="true" 实际计算结果为字符串 'true'，而 [value]="true" 计算结果为布尔值 true。

【讨论】：

谢谢，你拯救了我的一天！！

如果您仍然希望该值使用 'true' 作为字符串并默认选中，则需要将 rule.mode 的值设置为 true 作为默认值。

看起来您在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中已弃用对使用 ngModel 输入属性和 ngModelChange 事件和响应式表单指令的支持，并将在 Angular v7 中删除。有关这方面的更多信息，请在此处查看我们的 API 文档：angular.io/api/forms/FormControlName#use-with-ngmodel

感谢您的回答和解释。我在做同样的事情，只是我的单选按钮的属性是类型号。如果没有对值进行属性绑定，它将被评估为字符串而不是数字，并且不会检查默认单选按钮。

【参考方案2】：

我们可以通过以下方式使用[(ngModel)]，并有一个值选择变量radioSelected

Example tutorial

Demo Link

app.component.html

  <div class="text-center mt-5">
  <h4>Selected value is radiosel.name</h4>

  <div>
    <ul class="list-group">
          <li class="list-group-item"  *ngFor="let item of itemsList">
            <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="item.value" (change)="onItemChange(item)"/> 
            item.name

          </li>
    </ul>
  </div>


  <h5>radioSelectedString</h5>

  </div>

app.component.ts

  import Item from '../app/item';
  import ITEMS from '../app/mock-data';

  @Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  )
  export class AppComponent 
    title = 'app';
    radioSel:any;
    radioSelected:string;
    radioSelectedString:string;
    itemsList: Item[] = ITEMS;


      constructor() 
        this.itemsList = ITEMS;
        //Selecting Default Radio item here
        this.radioSelected = "item_3";
        this.getSelecteditem();
      

      // Get row item from array  
      getSelecteditem()
        this.radioSel = ITEMS.find(Item => Item.value === this.radioSelected);
        this.radioSelectedString = JSON.stringify(this.radioSel);
      
      // Radio Change Event
      onItemChange(item)
        this.getSelecteditem();
      

  

列表数据示例

        export const ITEMS: Item[] = [
            
                name:'Item 1',
                value:'item_1'
            ,
            
                name:'Item 2',
                value:'item_2'
            ,
            
                name:'Item 3',
                value:'item_3'
            ,
            
                name:'Item 4',
                value:'item_4'
                ,
                
                    name:'Item 5',
                    value:'item_5'
                
        ];

【参考方案3】：

如果您使用的是响应式表单，那么您可以使用以下方式。 考虑下面的例子。

在component.html中

 `<p class="mr-3"> Require Shipping: 

          <input type="radio" class="ml-2" value="true" name="requiresShipping" 
           id="requiresShipping" formControlName="requiresShipping">

                   &nbsp;  Yes  &nbsp;

          <input type="radio" class="ml-2" value="false" name="requiresShipping" 
          id="requiresShipping" formControlName="requiresShipping">

                   &nbsp;  No   &nbsp;
 </p>`

在component.ts中

`
 export class ClassName implements OnInit 
      public yourForm: FormGroup
      
      constructor(
            private fromBuilder: FormBuilder
      ) 
            this.yourForm= this.fromBuilder.group(
                  requiresShipping: this.fromBuilder.control('true'),
            )
        
 

`

现在您将获得默认选中的单选按钮。

【参考方案4】：

使用 Angular 12，这是适合我的项目

<label class="..-radio-box">
<input type="radio" name="radio" (click)="clickPayOption(false)"  [checked]="!isPayNow"  />
   Pay At Store
</label>
<label class="-radio-box">
<input type="radio" name="radio"  (click)="clickPayOption(true)"  [checked]="isPayNow" />
  Pay Now
</label>

在后端代码中

clickPayOption(selectedChoice:boolean) 
    this.isPayNow = selectedChoice;