Angular formArray单选按钮

时间:2018-07-19 16:06:58

标签: angular

我正在尝试将单选按钮组添加到FormArray。问题是,当我选择一个值时,它将更改FormArray的每个成员的值。我知道这与formControlName有关,但是我不知道如何使formControlName动态化。我看过this post,但它已经4岁了,有点模糊;即,我无法从中得出明确的答案。

这是我目前拥有的:

TS组件

//inputs and variable initialization

ngOnInit() {
  this.createSensorForm();
}

createSensorForm() {
    this.sensorForm = this.fb.group({
      ...
      definitions: this.fb.array([this.createDefinition()])
  });
}

createDefinition(): FormGroup {
  return this.fb.group({
    numeric: [""],
  });
}

addDefinition() {
  this.definitions = this.sensorForm.get('definitions') as FormArray;
  this.definitions.push(this.createDefinition());
}

HTML组件

<form [formGroup]="sensorForm" (ngSubmit)="createSensor()">
  ...
  <div formArrayName="definitions" 
       *ngFor="let definition of sensorForm.get('definitions').controls; let i = index;">
    <div [formGroupName]="i">
      ...
      <input type="radio" [value]="true" 
             formControlName="numeric" [(ngModel)]="numeric"> Yes
      <input type="radio" [value]="false" 
             formControlName="numeric" [(ngModel)]="numeric"> No
    </div>
  </div>
    <button class="btn btn-primary" type="button" (click)="addDefinition()">
      <i class="fa fa-plus"></i> Add Definition
    </button>
</form>

1 个答案:

答案 0 :(得分:1)

list_val=$(shell seq 1 8) 
define test_user
ifeq ("$(wildcard user0$(1).Z)","")
    echo "No file user0$(1).Z";
else
    echo "File user0$(1).Z exists !";
endif
endef
all:
    $(foreach var,$(list_val),$(eval $(call test_user,$(var))))

您的addDefinition错误,您没有“ this.definitions”

<div *ngIf="sensorForm"  [formGroup]="sensorForm" (ngSubmit)="createSensor()>
  <!---first the name of array-->
  <div formArrayName="definitions">
      <!--after the loop using a div, this div has [fromGroupName]=i -->
      <div *ngFor="let definition of sensorForm.get('definitions').controls; 
                  let i = index;" [formGroupName]="i">
          <!--each element, only use formControlName, ¡NOT! [(ngModel)] -->
          <!-- ngModel is for Template driven Form  -->
          <input type="radio" [value]="true" formControlName="numeric" > Yes
          <input type="radio" [value]="false" formControlName="numeric" > No
      </div>
  </div>  
</div>