如何关联 angular 表单中的文本字段和复选框

Question

所以我在 angular 表单中有动态表单字段，这些字段是在单击按钮时添加的，但现在我想在每个提交的文本前面添加一个复选框。因为我是 angular 的新手，所以我在实施 it.Currently 时遇到了困难我有这个 https://stackblitz.com/edit/angular-xweja5?file=src%2Fapp%2Fapp.component.html 有人可以帮我把复选框与输入 field.It 关联起来可能很简单但是我无法弄清楚过去 1 天一直在尝试。如果非常感谢任何帮助。

Answer 1

这样试试

template.html

<form [formGroup]="myForm">
        <button type="button" (click)="onAddProduct()">Add Product</button>
            <div formArrayName="productList" *ngFor="let item of productList?.controls; let i = index">
              <div [formGroupName]="i">
                  <label for="">Your row</label>
                  <input formControlName="name">
                  <input type="checkbox" formControlName="selected">
                  <button (click)="removeProduct(group.value,i)">remove</button>
              </div>
            </div>
{{myForm?.value|json}}
</form>

component.ts

import { Component } from '@angular/core';
import { FormArray, FormGroup, FormControl, FormBuilder } from '@angular/forms'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  public myForm: FormGroup;
constructor(private fb: FormBuilder) {

}
  ngOnInit() {
    this.myForm = this.fb.group({
      name: [],
      productList: this.fb.array([])
    })
  } 

  onAddProduct(group:FormGroup) {
    const creds = this.myForm.controls.productList as FormArray;
    creds.push(this.fb.group({
      name: [''],
      selected:[''] 
    }));
  }

  get productList()
  {
    return this.myForm.get('productList') as FormArray;
  }
  removeProduct(group:FormGroup,index:number)
  {
    (group.get('productList') as FormArray).removeAt(index)
  }


}

这里正在工作stackblitz

如何关联 angular 表单中的文本字段和复选框

How to associate text field and checkbox in angular form

javascript

forms

angularjs-directive

angular