Question

我已经嵌套了formGroup：

  this.form = fb.group({
  productName: ['ASD'],
  productWeightCategory: fb.group({
    id: [],
    categoryWeightName: []
  })

和模板：

<form class="container col-md-2" [formGroup]="form"
    (ngSubmit)="onSubmit(form.value)">

    <div>
        <label for="productName">productName</label> <input
            class="form-control" id="productName" type="text" placeholder=""
            formControlName="productName"> <span class="small help-block"></span>
        <label for="radios">weigh category</label>
        <fieldset formGroupName="productWeightCategory">
            <div class="radio"
                *ngFor="let element of productWeightCategory; let ind=index;">
                <label> <input [value]="element" type="radio" name="id"
                    [checked]="ind===0"> {{element.categoryWeightName}} index
                    = {{ind}}
                </label>
            </div>
        </fieldset>
    </div>
    <input class="btn btn-primary" type="submit" [disabled]="!form.valid"
        value="submit">
</form>

我无法从无线电中获取价值。

可能我错过了一些东西，但我无法弄清楚是什么。

工作demo

Answer 1

删除formGroupName="productWeightCategory"，而在输入中执行以下操作：

<input formControlName="productWeightCategory" [ngValue]="element" >

要设置checked属性，您需要以编程方式执行此操作，因为您正在使用ReactiveFormsModule。这意味着FormControl的值必须与[ngValue]的值相同。您可以通过设置FormControl的值在组件中执行此操作。我不确定您是如何获取数据的，但它会与此类似：

for(let i = 0; i < this.productWeightCategory.length; i++){
     if(condition)
         this.form.get('productWeightCategory').setValue(this.productWeightCategory[i]);
}

Answer 2

正如Christian建议的那样，删除嵌套组，你想要的是一个表单控件。如果您想要选择数组中的第一个项目，只需在构建表单时设置：

productWeightCategories = [
 new ProductWeightCategory(1, 'value 1'), 
 new ProductWeightCategory(2, 'value 2'), 
 new ProductWeightCategory(3, 'value 3')
];

constructor(fb: FormBuilder) {
  this.form = fb.group({
    productName: ['ASD'],
    productWeightCategory: [this.productWeightCategories[0]]
  });
}

如果您想在以后设置它，请使用像Christian建议的setValue。

对于您的模板，请使用[value]，就像使用formControlName="productWeightCategory"一样。您还需要将name属性更改为相同，否则Angular将开始抱怨：）

<fieldset>
  <div class="radio" *ngFor="let element of productWeightCategories; let i=index;">
    <label> 
      <input [value]="element" type="radio" 
             name="productWeightCategory" 
             formControlName="productWeightCategory">
        {{element.categoryWeightName}} index = {{i}}
    </label>
  </div>
</fieldset>

StackBlitz

Answer 3

您可以使用id: [ this.productWeightCategory[0].id ],设置收音机，并在收音机输入中使用formControlName="id"：

<fieldset formGroupName="productWeightCategory">
    <div class="radio" *ngFor="let element of productWeightCategory; let i=index;">
        <label> <input [value]="element.id" type="radio" name="id" formControlName="id"> {{element.categoryWeightName}} index = {{i}} </label>
    </div>
</fieldset>

然后设置提交的categoryWeightName，使用id找到它。

this.form = fb.group({
  productName: ['ASD'],
  productWeightCategory: fb.group({
    id: [ this.productWeightCategory[0].id ],
    categoryWeightName: []
  })
});

这不能用于嵌套FormGroup

example

嵌套formGroup将Object绑定到单选按钮

3 个答案: