Angular 6 动态复选框表单“错误：找不到名称为‘P1’的控件”

Question

我正在尝试找到一种方法来显示包含一列复选框的动态表单。在遵循了一个不错的 youtube 指南之后，我的代码行为不同，无法正常工作。

问题：即使我可以看到表单控件名称是 p1,p2,p3.. 等 以及寻找此控件的表单。他们不会加载，不会连接并返回此消息：Error: Cannot find control with name: 'P1'

所以我在这里再次寻求帮助。或者一个很好的链接和一个很好的指南将不胜感激。

JSON 文件

platformsArray =  [
  {
    platform_id: 'P1',
    platform_name: "Facebook",
    platform_weight: 0.5,
    selected: true
  },
  {
    platform_id: 'P2',
    platform_name: "Instragram",
    platform_weight: 0.7,
    selected: true
  },
  {
    platform_id: 'P3',
    platform_name: "Google",
    platform_weight: 0.2,
    selected: true
  },      
  {
    platform_id: 'p4',
    platform_name: "AdWords",
    platform_weight: 0.6,
    selected: true
  },
  {
    platform_id: 'p5',
    platform_name: "Google My Business",
    platform_weight: 0.15,
    selected: true
  }
];

comp.ts

//platforms form
platformForm: FormGroup;




constructor(private router: Router, private fb: FormBuilder ) {



this.platformForm = fb.group({
      P1: [],
      P2: [],
      P3: [],
      p4: [],
      p5: [],
      platforms: this.buildPlatforms()
    });

//这里我们构造控件

  buildPlatforms() {
    const arr = this.platformsArray.map(platform => {
      return this.fb.control(platform.platform_id);
    });
    console.log(arr)
    return this.fb.array(arr);
  }

调用并提交

  submit(platformForm) {

    console.log(platformForm)

}

html

        <!-- platform form -->
        <form [formGroup]="platformForm" (ngSubmit)="submit(platformForm.value)">
        <!-- Default unchecked -->
        <div *ngFor="let platform of platformsArray; let i=index" class="custom-control custom-checkbox" (ngSubmit)="submit()">

                <input type="checkbox" class="custom-control-input"  [formControlName]="platform.platform_id" [id]="platform.platform_id" checked>
                <label class="custom-control-label" [for]="platform.platform_id">{{platform.platform_name}}</label>

        </div>


            <div class="text-center">
                <button type="submit" class="btn btn-success btn-md">Sign in</button>

            </div>

        </form>
        <!-- platform form -->

请注意我是新手。所以我仍然试图了解这里发生了什么。感谢您的帮助:-)

Answer 1

试试这样的：

DEMO

<form [formGroup]="platformForm" (ngSubmit)="submit()">
    <div formArrayName="platforms">

        <div *ngFor="let item of platformForm.get('platforms').controls; let i = index;" [formGroupName]="i">

            <div style="margin: 10px;">{{item.value | json }}</div>
            <div>
                <input type="checkbox" formControlName="platform_id" checked>
                <label>{{platformForm.controls.platforms.controls[i].controls.platform_name.value}}</label>
            </div>
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

TS：

  platforms: FormArray;
  platformForm: FormGroup;
  constructor(private fb: FormBuilder) {

  }
ngOnInit() {
    this.createForm();

 this.platforms = this.getData();
    while (this.getData().length) {
      this.platforms.removeAt(0)
    }

    for (let d of this.platformsArray) {
      this.addMore(d);
    }
  }

  getData() {
    return this.platformForm.get('platforms') as FormArray;
  }

  addMore(d) {
    this.getData().push(this.buildPlatforms(d));
  }


  createForm() {
    this.platformForm = this.fb.group({
      platforms: this.fb.array([this.buildPlatforms({
        platform_id: null,
        platform_name: null,
        platform_weight: null,
        selected: null
      })])
    });
  }

  buildPlatforms(data) {
    if (!data) {
      data = {
        platform_id: null,
        platform_name: null,
        platform_weight: null,
        selected: null
      }
    }
    return this.fb.group({
      platform_id: data.platform_id,
      platform_name: data.platform_name,
      platform_weight: data.platform_weight,
      selected: data.selected
    });
  }


  submit() {
    console.log(this.platformForm.value)
  }