angular中表单的formControlName怎么设置(Ant Design of Angular)

Question

问题

我有一个数组,数组里有多个对象，想根据对象的一个属性type: 'minApp'分开显示，然后表单提交,但是不是拿不到值，就是不能判断if,else显示

方案 1

nz-checkbox-wrapper怎么设置formControlName

                  <nz-checkbox-wrapper [formControlName]="config['key']">
                    <div nz-row *ngFor="let data of checkboxValue">
                      <div *ngIf="data.type ==='app'">
                        <label  nz-checkbox  nzValue="data.value" >{{data.label}}</label>
                      </div>
                      <div *ngIf="data.type ==='minApp'">
                        <label  nz-checkbox nzValue="data.value">{{data.label}}</label>
                      </div>
                    </div>
                  </nz-checkbox-wrapper>

这个时候表单提交displayModule拿不到值

方案 2

nz-checkbox-group怎么if，else判断checkboxValue数组中item的
type

` <nz-checkbox-group class='right-item' [(ngModel)]="checkboxValue" [formControlName]="config['key']" ></nz-checkbox-group>`

这个时候能拿到值，但是不能分开

全部代码

import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'checkbox-control',
  template: `
    <span [formGroup]="group">
      <nz-form-item>
        <nz-form-label
          [nzRequired]="config['isRequired']"
          [nzSpan]="config['isHorizontal'] ? 4 : null"
          [nzFor]="config['key']"
          >{{ config['label'] }}</nz-form-label>
        <nz-form-control [nzSpan]="config['isHorizontal'] ? 14 : null" [nzErrorTip]="config['tips']">
          <div class='display-module-box'>
            <header class='box-header'>
              <span>设置模块</span>
              <span>客户端显示</span>
              <span>对应小程序显示</span>
            </header>
            <div class='box-content'>
              <div class='content-left'>
                <p *ngFor="let data of displayModuleData">
                  {{data.name}}
                </p>
              </div>
              <div class='content-right'>
                  <!-- <nz-checkbox-group class='right-item' [(ngModel)]="checkboxValue" [formControlName]="config['key']" ></nz-checkbox-group> -->
                  <nz-checkbox-wrapper [formControlName]="config['key']">
                    <div nz-row *ngFor="let data of checkboxValue">
                      <div *ngIf="data.type ==='app'">
                        <label  nz-checkbox  nzValue="data.value" >{{data.label}}</label>
                      </div>
                      <div *ngIf="data.type ==='minApp'">
                        <label  nz-checkbox nzValue="data.value">{{data.label}}</label>
                      </div>
                    </div>
                  </nz-checkbox-wrapper>
              </div>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item >
    </span>
  `,
  
export class CheckboxComponent implements OnInit{
  checkboxValue = [
    {
      value: 'APP_PRODUCT_CHJ',
      label: '超话菌',
      type: 'app'
    },
    {
      value: 'APP_PRODUCT_CHJ2',
      label: '超话菌2',
      type: 'app'
    },
    {
      value: 'APP_PRODUCT_JRCD',
      label: '今日穿搭',
      type: 'minApp'
    },
    {
      value: 'APP_PRODUCT_JRCD2',
      label: '今日穿搭2',
      type: 'minApp'
    },
  ]
}