如何从 Angular 中的表单中获取数据

Question

我想从表单中获取数据。我收到的数据不正确。我的问题是什么？

public editForm: FormGroup = new FormGroup({
    'id' : new FormControl(''),
    'name': new FormControl('', Validators.required),
    'code': new FormControl('', Validators.required),
    'active': new FormControl(),
    'sequence' : new FormControl(null),
    'entryTypes': new FormArray([new FormControl(), new FormControl()])
});

<div class="form-group">
    <label>
        <input type="checkbox" formArrayName="entryTypes" [checked]="locationEntryTypeDTOs[0].enabled"/>
        {{locationEntryTypeDTOs[0].entryTypeCode}}
     </label>
</div>

<div class="form-group">
    <label>
        <input type="checkbox" formArrayName="entryTypes" [checked]="locationEntryTypeDTOs[1].enabled"/>
        {{locationEntryTypeDTOs[1].entryTypeCode}}
    </label>
</div>

Answer 1

按以下方式定义entryType数组。

<div class="form-group" formArrayName="entryTypes">
    <div *ngFor="let entryType of editForm.controls.entryTypes.controls; index as i">
        <label>
          <input type="checkbox" formControlName="{{i}}" />
          {{locationEntryTypeDTOs[i].entryTypeCode}}
        </label>
    </div>
</div>

并按以下方式更新您的 'entryTypes' 表单元素。而且，如果 locationEntryTypeDTOs 中存储了更多复选框和值，则必须创建一个单独的函数来启动 'entryTypes'。

'entryTypes': new FormArray([new FormControl(locationEntryTypeDTOs[0].enabled), new FormControl(locationEntryTypeDTOs[1].enabled)])

Answer 2

<form [formGroup]="editForm">
  <div formArrayName="entryTypes">
      <input  [formControlName]="0">
      <input  [formControlName]="1">
  </div>
</form>

或者如果你想迭代

<form [formGroup]="editForm">
  <div formArrayName="entryTypes">
      <input *ngFor="let control of editForm.get('entryTypes').controls;
           let i=index" [formControlName]="i">
  </div>
</form>

其他形式

<form [formGroup]="editForm">
  <div formArrayName="entryTypes">
      <input *ngFor="let control of editForm.get('entryTypes').controls;
           let i=index" [formControl]="control">
  </div>
</form>

如何从 Angular 中的表单中获取数据

How to get data from the form in Angular

kendo-ui

angular

formarray