Angular 为什么我会犯这些错误；路径为&x27；的窗体控件没有值访问器；行详细信息->；0->；否'&引用；

我们尝试使用formGroup时出现了一些错误。 我需要一些关于表单组的解释。 我想创建一个包含数据的表单组。 数据需要逐行显示。 我们使用角度8 当我运行它时，我得到了以下错误：

没有路径为“rowDetails->0->No”的表单控件的值访问器

我有一个组件构造函数：

 constructor(
    public fb: FormBuilder
    ) { 
      this.summaryForm = this.fb.group({
        rowDetails: this.fb.array([])
      })
    }

ngOnInit() {
    this.productList = (this.selectedReceiptBatch.incomeSummary as SaleSummary).sales;
    this.summaryForm = this.fb.group({
      rowDetails: this.fb.array(
        this.productList.map(x=> this.fb.group({
              'no': x.product.code,
              'desc': x.product.productClass,
              'numberx': [x.number.x],
              'numbery': x.number.y,
              'amountz': x.number.z,
              'reference': [x.reference]
        })
      )) 
    });
    console.log(this.summaryForm);
    this.formControlAvailable = true;
  }

<div *ngIf="formControlAvailable">

  <div>

    <div [formGroup]="summaryForm">
      <div formArrayName="rowDetails">
        <div *ngFor="let row of summaryForm.controls.rowDetails.controls; let index = index">
          <div [formGroupName]="index">
            <div>
              <span formControlName="no" >{{row.value.no}}</span>
            </div>            
            <div>
              <span *ngIf="row?.product?.code" formControlName="desc" >
                {{row.value.desc}}
              </span>
              <div *ngIf="!row?.product?.code" ngbDropdown class="d-inline-block">
                <mat-form-field>
                  <mat-label>Select an option</mat-label>
                  <mat-select [(value)]="row.product.code" formControlName="desc" >
                    <mat-option *ngFor="let product of cashableProducts" [value]="product.code">
                      {{product.code}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>

            </div>
            <div >
              <input type="number" [value]="row.amount.net"
                (change)="row.amount.net = parseNumber($event.target.value);calculate()" 
                formControlName='numberx' />
            </div>
            <div >
              <span formControlName='numbery' >{{ row.value.numbery }}$</span>
            </div>
            <div >
              <span formControlName='numberz' >{{ row.value.numberz }}$</span>
            </div>
            <div >
              <input formControlName='reference' type="text" class="form-control" minlength="0" [(ngModel)]="row.reference" />
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

我有一个组件控制器：

 constructor(
    public fb: FormBuilder
    ) { 
      this.summaryForm = this.fb.group({
        rowDetails: this.fb.array([])
      })
    }

ngOnInit() {
    this.productList = (this.selectedReceiptBatch.incomeSummary as SaleSummary).sales;
    this.summaryForm = this.fb.group({
      rowDetails: this.fb.array(
        this.productList.map(x=> this.fb.group({
              'no': x.product.code,
              'desc': x.product.productClass,
              'numberx': [x.number.x],
              'numbery': x.number.y,
              'amountz': x.number.z,
              'reference': [x.reference]
        })
      )) 
    });
    console.log(this.summaryForm);
    this.formControlAvailable = true;
  }

<div *ngIf="formControlAvailable">

  <div>

    <div [formGroup]="summaryForm">
      <div formArrayName="rowDetails">
        <div *ngFor="let row of summaryForm.controls.rowDetails.controls; let index = index">
          <div [formGroupName]="index">
            <div>
              <span formControlName="no" >{{row.value.no}}</span>
            </div>            
            <div>
              <span *ngIf="row?.product?.code" formControlName="desc" >
                {{row.value.desc}}
              </span>
              <div *ngIf="!row?.product?.code" ngbDropdown class="d-inline-block">
                <mat-form-field>
                  <mat-label>Select an option</mat-label>
                  <mat-select [(value)]="row.product.code" formControlName="desc" >
                    <mat-option *ngFor="let product of cashableProducts" [value]="product.code">
                      {{product.code}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>

            </div>
            <div >
              <input type="number" [value]="row.amount.net"
                (change)="row.amount.net = parseNumber($event.target.value);calculate()" 
                formControlName='numberx' />
            </div>
            <div >
              <span formControlName='numbery' >{{ row.value.numbery }}$</span>
            </div>
            <div >
              <span formControlName='numberz' >{{ row.value.numberz }}$</span>
            </div>
            <div >
              <input formControlName='reference' type="text" class="form-control" minlength="0" [(ngModel)]="row.reference" />
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

HTML:

 constructor(
    public fb: FormBuilder
    ) { 
      this.summaryForm = this.fb.group({
        rowDetails: this.fb.array([])
      })
    }

ngOnInit() {
    this.productList = (this.selectedReceiptBatch.incomeSummary as SaleSummary).sales;
    this.summaryForm = this.fb.group({
      rowDetails: this.fb.array(
        this.productList.map(x=> this.fb.group({
              'no': x.product.code,
              'desc': x.product.productClass,
              'numberx': [x.number.x],
              'numbery': x.number.y,
              'amountz': x.number.z,
              'reference': [x.reference]
        })
      )) 
    });
    console.log(this.summaryForm);
    this.formControlAvailable = true;
  }

<div *ngIf="formControlAvailable">

  <div>

    <div [formGroup]="summaryForm">
      <div formArrayName="rowDetails">
        <div *ngFor="let row of summaryForm.controls.rowDetails.controls; let index = index">
          <div [formGroupName]="index">
            <div>
              <span formControlName="no" >{{row.value.no}}</span>
            </div>            
            <div>
              <span *ngIf="row?.product?.code" formControlName="desc" >
                {{row.value.desc}}
              </span>
              <div *ngIf="!row?.product?.code" ngbDropdown class="d-inline-block">
                <mat-form-field>
                  <mat-label>Select an option</mat-label>
                  <mat-select [(value)]="row.product.code" formControlName="desc" >
                    <mat-option *ngFor="let product of cashableProducts" [value]="product.code">
                      {{product.code}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>

            </div>
            <div >
              <input type="number" [value]="row.amount.net"
                (change)="row.amount.net = parseNumber($event.target.value);calculate()" 
                formControlName='numberx' />
            </div>
            <div >
              <span formControlName='numbery' >{{ row.value.numbery }}$</span>
            </div>
            <div >
              <span formControlName='numberz' >{{ row.value.numberz }}$</span>
            </div>
            <div >
              <input formControlName='reference' type="text" class="form-control" minlength="0" [(ngModel)]="row.reference" />
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

{{row.value.no}
{{row.value.desc}}
选择一个选项
{{product.code}}
{{row.value.numbery}$
{{row.value.numberz}}$

您只能将

formControlName

指令放在实现接口值访问器接口的输入元素、select、textarea或组件上

改变这个

{{row.value.no}

像这样输入元素

如果您只想显示

no

值

{{row.value?.no}}

---

谢谢，如果我只想使用标签的值，我们可以不用输入和formControlName吗？原因如果我删除此命令，我会出现此错误：

无法找到路径为：'rowDetails->0->'

的控件，就像这样

{{row.value？.no}}}

将正常工作，因为如果我删除此formControlName及其关联的输入，我会出现此错误

{{row.value？.no}

：找不到路径为的控件：'rowDetails->0->能否与我们共享

此.summaryForm

日志值，以便我可以测试它