Angular

Question

我们有如下列表（在原始实现中，productList 将来自 API）

productList = [{
    productId: "104",
    productName: "computer"
  },
  {
    productId: "105",
    productName: "Sprots"
  },
  {
    productId: "106",
    productName: "TV"
  }];

我们需要在 html 中将产品名称显示为 单选按钮，类似这样。

[] Computer [] Sports [] TV

当我们 select 一个单选按钮时，它应该在组件中给出 selected 项目（例如，如果我们 select TV 单选按钮那么，可能是这样的？

this.myForm.controls['productMethods'].valueChanges.subscribe(value => { var a = value // how can i get a = { productId: "106",productName: "TV"} **?** }

前 selected :-

[] Computer [x] Sports <== how to make sports as pre-selected on page load also **?** [] TV

我试过 https://stackblitz.com/edit/angular-formarray-example-2-3xq45k 但未能显示单选按钮。

谢谢，

Answer 1

1.-你需要写"formArrayName"

2.-formControlName被[]

括起来

3.-单选按钮???如果你想要单选按钮，它只是一个 formControlName，而不是一个数组

<div [formGroup]="productFormGroup">
    <!---you need write "formArrayName"--->
    <div formArrayName="productMethods">
        <div *ngFor="let item of productList; let i = index">
            <div>
                <!--formControlName is enclosed by []-->
                <input type="checkbox" name="{{'acceptable'+i}}" [formControlName]="i">
                <label class="custom-control-label" 
                    for="{{ 'acceptable' + i}}">{{item.productName}}
               </label>
           </div>
        </div>
    </div>
</div>

this.myForm.controls['productMethods'].valueChanges.subscribe(value => {
      //value becomes, e.g. [true,false,false]
      values.forEach((v,index)=>{
         if (v)
           console.log(productList[i]);
      })
    }

注意：如果您需要单选按钮

<div [formGroup]="productFormGroup">
    <div *ngFor="let item of productList; let i = index" >
        <input type="radio" name="product" formControlName="product" [value]="item" >
    <label class="custom-control-label" 
        for="{{ 'acceptable' + i}}">{{item.productName}}</label>
    {{item.productname}}
  </div>
</div>

但是你的表格就像

this.productFormGroup = this.formBuilder.group({
      product:''
    });

Answer 2

Here is an updated version of your Stackblitz.

首先，由于您使用的是无线电输入，因此您只会收到一个值，而不是一个数组。

this.productFormGroup = this.formBuilder.group({
  productMethod: new FormControl("105"),
});

其次，您的无线电输入需要全部具有相同的名称（该名称需要与 formControlName 匹配）。

<input type="radio"
  formControlName="productMethod"
  id="radio{{i}}"
  name="productMethod"
  [value]=item>
<label class="custom-control-label"
  for="radio{{i}}">
  {{item.productName || '?'}}
</label>

第三，我不会将对象用作表单值，因为您无法（轻松地）比较对象来设置默认值。使用 productId 并使用方法检索相应的产品。

getProductById(id): any {
  return this.productList.find(p => p.productId == id);
}

最后，我做了其他一些小改动，使您的代码更好一些。

<div [formGroup]="productFormGroup">
  <div *ngFor="let item of productList; let i = index;">
    <input type="radio"
      formControlName="productMethod"
      id="radio{{i}}"
      name="productMethod"
      [value]=item.productId>
    <label class="custom-control-label"
      for="radio{{i}}">
      {{item.productName || '?'}}
    </label>
  </div>
</div>
{{ getProductById(productFormGroup.controls.productMethod.value) | json }}

Answer 3

有点晚了，但让我把它留在这里。 angular material 有 mat-radio-group，在你的模块中，import {MatRadiomodule} from '@angular/material' 同样，在 @NgModule.

中导入它

在你的 component.

this.formGroupVariable = this.fb.group({
    productItem: ['', Validators.required],
    . . .
});

然后在你的 template component,

<mat-radio-group *ngFor="let productItem of productList">
    <label for="{{productItem.value}}" class="radio-inline">
        <input id="{{productItem.value}}" 
               [value]="productItem.value"
               formControlName="productItem"                                          
               type="radio"
               name="requestType"
               [checked]="productItem.value==='Sports'">
               {{productItem.value}}
    </label>
</mat-radio-group>

希望对您有所帮助。

Angular - 反应形式的多个单选按钮

Angular - Multiple Radio buttons in reactive forms

angular-reactive-forms

angular6