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)
  }

Angular 6动态复选框形式“错误：找不到名称为'P1'的控件”

1 个答案: