如何将表单组中的对象元素用作表单控件名称

Question

HTML 文件 ->

 <form [formGroup]="vgaReportForm">
<div *ngFor="let ansDetails of formArray; let i = index">
  <div formGroupName="answerDetails">
    <div formArrayName="strategicSphere1">
      <!-- <div formArrayName="answerDetails"> -->
        <!-- <div [formGroupName]='i'> -->
          <table class="table table-striped table-bordered table-hover dataTable">
            <thead>
              <tr class="thead">
                <th style="width: 25%">Zone of the Sphere</th>
                <th style="width: 25%">Strategic Intent</th>
              </tr>
              <tr>
                <td>Core</td>
                <td> <input type="text" class="form-control" formControlName="core"> </td>
              </tr>
              <tr>
                <td>Vital Interests</td>
                <td> <input type="text" class="form-control" formControlName="vitalInterests"> </td>
              </tr>
              <tr>
                <td>Buffer Zones</td>
                <td> <input type="text" class="form-control" formControlName="bufferZones"> </td>
              </tr>
              <tr>
                <td>Pivotal Zones</td>
                <td> <input type="text" class="form-control" formControlName="pivotalZones"> </td>
              </tr>
              <tr>
                <td>Forward Positions</td>
                <td> <input type="text" class="form-control" formControlName="forwardPositions"> </td>
              </tr>
              <tr>
                <td>Power Vacuums</td>
                <td> <input type="text" class="form-control" formControlName="powerVaccums"> </td>
              </tr>
            </thead>
          </table>
        <!-- </div> -->
    </div>

    <div formArrayName="strategicSphere2">
      <div class="card">
        <div class="card-body">
          <div class="box-header mt-4 ml-n3">
            <a class="breadcrumb"><i class="fa fa-dashboard"></i>{{ questions }}</a>
          </div>
          <div class="container">
            <img alt="Nature" src="assets/img/StrategicSphere1.png"
              style="align-content: center; margin-left: 150px; width:812px; height: 512px;">
            <div class="textbox1">
              <textarea rows="2" style="width:120px; color: black;background: #fff; border: none;" formControlName="textbox1"></textarea>
            </div>
            <div class="textbox2">
              <textarea rows="2" style="width:116px; color: black;background: #919191; border: none;" formControlName="textbox2"></textarea>
            </div>
            <div class="textbox3">
              <textarea rows="2" style="width:115px; color: black;background: #919191; border: none;" formControlName="textbox3"></textarea>
            </div>
            <div class="textbox4">
              <textarea rows="2" style="width:120px; color: black;background: #fff; border: none;" formControlName="textbox4"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div formArrayName="strategicSphere3">
      <div class="card">
        <div class="card-body">
          <div class="box-header mt-4 ml-n3">
            <a class="breadcrumb"><i class="fa fa-dashboard"></i>{{ questions }}</a>
          </div>
          <div class="row">
            <div class="col-md-6">
              <h2 class="text-center">Initiatives</h2>
            </div>
            <div class="col-md-6">
              <h2>Operating priorities</h2>
            </div>
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12">
            <img alt="Nature" class="ml-5" src="assets/img/StrategicSphere2.png"
              style="align-content: center; width:850px; height:220px;">
            <div class="textbox mytextbox_1">
              <textarea rows="2" class="ml-n3"
                style="width:65%; color: black;" formControlName="txtIntiative1"></textarea>
            </div>
            <div class="textbox mytextbox_2">
              <textarea formcontrolname="txtoperatingpriorities11" rows="1"
                style="width:470px; color: black; height:45px;" formControlName="txtOperatingProperties1"></textarea>
            </div>
            <div class="textbox mytextbox_3">
              <textarea formcontrolname="txtoperatingpriorities12" rows="1"
                style="width:470px; color: black; height:44px;" formControlName="txtOperatingProperties2"></textarea>
            </div>
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12">
            <img alt="Nature" class="ml-5" src="assets/img/StrategicSphere2.png"
              style="align-content: center; width:850px; height:220px;">
            <div class="textbox mytextbox_1">
              <textarea class="ml-n3" rows="2"
                style="width:65%; color: black;" formControlName="txtIntiative2"></textarea>
            </div>
            <div class="textbox mytextbox_2">
              <textarea rows="1"
                style="width:470px; color: black; height:45px;" formControlName="txtOperatingProperties3"></textarea>
            </div>
            <div class="textbox mytextbox_3">
              <textarea rows="1"
                style="width:470px; color: black; height:44px;" formControlName="txtOperatingProperties4"></textarea>
            </div>
          </div>
          <div class="col-lg-12 col-md-12 col-sm-12">
            <img alt="Nature" class="ml-5" src="assets/img/StrategicSphere2.png"
              style="align-content: center; margin-left:100px; width:850px; height:220px;">
            <div class="textbox mytextbox_1">
              <textarea class="ml-n3"
                style="width:65%; color: black; height:45px;" formControlName="txtIntiative3"></textarea>
            </div>
            <div class="textbox mytextbox_2">
              <textarea rows="1"
                style="width:470px; color: black; height:45px;" formControlName="txtOperatingProperties5"></textarea>
            </div>
            <div class="textbox mytextbox_3">
              <textarea rows="1"
                style="width:470px; color: black; height:44px;" formControlName="txtOperatingProperties6"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>

      <div class="mt-3 float-right">
        <button class="btn btn-submit btn-primary" id="submit" (click)="onSubmit()">
          Submit
        </button>
      </div>
  </div>

Ts 文件 ->

ngOnInit(): void {
this.strategicSphere1 = [{
    core: '',
    vitalInterests: '',
    bufferZones: '',
    pivotalZones: '',
    forwardPositions: '',
    powerVaccums: '',
}];
this.strategicSphere2 = [{
    textbox1: '',
    textbox2: '',
    textbox3: '',
    textbox4: '',
}];
this.strategicSphere3 = [{
    txtIntiative1: '',
    txtIntiative2: '',
    txtIntiative3: '',
    txtOperatingProperties1: '',
    txtOperatingProperties2: '',
    txtOperatingProperties3: '',
    txtOperatingProperties4: '',
    txtOperatingProperties5: '',
    txtOperatingProperties6: ''
}];

this.getVgAuditDetails();
this.vgaReportForm = this.formBuilder.group({
  section_id: [this.sectionId],
  userId: [this.userObj.id],
  QuestionId: [this.questionId],
  vgaAuditNumber: [this.vgAudit.vga_audit_number],
  clientId: [this.clientId],
  answerDetails: this.formBuilder.group({
    strategicSphere1: this.formBuilder.array([this.strategicSphere1]),
    strategicSphere2: this.formBuilder.array([this.strategicSphere2]),
    strategicSphere3: this.formBuilder.array([this.strategicSphere3])
  })
  // answerDetails: this.formBuilder.array([this.newAnswerDetails()])
});
this.formArray.push(this.vgaReportForm.controls.answerDetails.controls);

}

嘿，我遇到了无法找到上图中显示的表单控件名称的错误，我不明白为什么会出现这个错误，
我试了很多方法都没有找到解决办法，请帮我解决这个错误。
请检查下图以查看我得到的错误。
this s an image of error

Answer 1

FormArray 是抽象控件（FormControl、FormGroup 或 FormArray）的数组。

首先使用这样的代码：

strategicSphere1: this.formBuilder.array([this.strategicSphere1])
this.strategicSphere1 = [{
    core: '',
    vitalInterests: '',
    bufferZones: '',
    pivotalZones: '',
    forwardPositions: '',
    powerVaccums: '',
}];

这意味着 strategicSphere1 是嵌套的，因为您将数组推入数组（并且您推入的是 javascript 对象，而不是 AbstractControl:

[
 [
   {
    core: '',
    vitalInterests: '',
    bufferZones: '',
    pivotalZones: '',
    forwardPositions: '',
    powerVaccums: '',
    }
  ]
]

但与其修复它，不如摆脱 FormArray 的使用：因为每个控件的键都已定义，所以没有正当理由使用 FormArray 的复杂性。这仅对抽象控件的动态列表有用。

这里可以改成：

answerDetails: this.formBuilder.group({
    strategicSphere1: this.formBuilder.group({
      core: '',
      vitalInterests: '',
      bufferZones: '',
      pivotalZones: '',
      forwardPositions: '',
      powerVaccums: '',
    }),
    ... and so on
  })

如何将表单组中的对象元素用作表单控件名称

how to use element of object in formgroup as formcontrolname

form-control

angular

formarray

formgroups