Question

我知道这个问题每年都会出现多次，但我无法解决这个问题。我需要根据数组给定的元素动态创建formArray。尝试了多次尝试，但我坚持尝试使用以下介质：https://medium.com/aubergine-solutions/add-push-and-remove-form-fields-dynamically-to-formarray-with-reactive-forms-in-angular-acf61b4a2afe

我的html：

<mat-accordion class="example-headers-align">
    <form [formGroup]="formGroup">
        <mat-expansion-panel [expanded]="step === item.step" (opened)="setStep(item.step)" hideToggle
            *ngFor="let item of csvColumns; let i = index" formArrayName="selectionArray">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{item.title}}
                </mat-panel-title>
                <mat-panel-description>
                    {{i}} {{item.description}}
                </mat-panel-description>
                <fa-icon [icon]="['fas', 'list-ul']" size="lg" style="color: grey"></fa-icon>
            </mat-expansion-panel-header>

            <mat-form-field>
                <mat-label>{{'CSV.DBATTR' | translate}}</mat-label>
                <input matInput placeholder="{{'CSV.CHOOSE' | translate}}" [matAutocomplete]="auto"
                    [formControl]="selectionArray[i]">
                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                    <mat-option>{{'CSV.NONE' | translate}}</mat-option>
                    <mat-optgroup *ngFor="let group of filteredOptions | async" [label]="group.name">
                        <!-- <fa-icon [icon]="['fas', 'table']" size="lg" class="tree-icons"></fa-icon> -->
                        <mat-option *ngFor="let children of group.children" [value]="children.name">
                            <!-- <fa-icon [icon]="['fas', 'tag']" size="md" class="tree-icons"></fa-icon> -->
                            {{children.name}}
                        </mat-option>
                    </mat-optgroup>
                </mat-autocomplete>
            </mat-form-field>

            <mat-action-row>
                <button *ngIf="item.step !== 0" mat-button color="warn"
                    (click)="prevStep()">{{'CSV.PREV' | translate}}</button>
                <button *ngIf="item.step < csvColumns.length-1" mat-button color="primary"
                    (click)="nextStep()">{{'CSV.NEXT' | translate}}</button>
                <button *ngIf="item.step === csvColumns.length-1" mat-button color="primary"
                    (click)="nextStep()">{{'CSV.END' | translate}}</button>
            </mat-action-row>
        </mat-expansion-panel>
    </form>
</mat-accordion>

要解释该代码：*ngFor="let item of csvColumns; let i = index"它动态创建与数组包含的项目一样多的项目。例如。其中的5个元素创建5个扩展面板。我需要能够访问用户为此选择下拉列表中的每个元素选择的值。所以我的想法是在创建扩展面板的步骤中为每个面板创建formControls。

这就是为什么我要使用formArray的原因。如果您认为这是一个错误的尝试，请告诉我一个更好的尝试。

我的ts：

export class CSVMappingComponent implements OnInit {

  @Input() headerColumns: Array<string>;

  csvColumns: Array<ExtensionPanelModel>;

  filteredOptions: Observable<DatabaseGroup[]>;
  databaseGroups: DatabaseGroup[];

  formGroup: FormGroup;


  constructor(private builder: FormBuilder) {
    this.formGroup = this.builder.group({
      selectionArray: this.builder.array([])
    });
  }

  // i don't need this but i'm trying everything
  createBox(): FormGroup {
    return this.builder.group({
      name: ''
    });
  }

  get selectionArray() {
    return this.formGroup.get('selectionArray') as FormArray;
  }

  addItems() {
    this.csvColumns = [];
    for (var i = 0; i < this.headerColumns.length; i++) {
      let _step = i.toString();

      this.csvColumns.push({ title: this.translateService.instant('CSV.COLUMN') + ": " + this.headerColumns[i], description: this.translateService.instant('CSV.DESCRIPTION'), step: i });
      this.selectionArray.push(this.createBox());
      // here I really don't know what to do bc I don't need any validator just access the value
      // this.selectionArray.push(this.builder.control(false));
    }
  }

并且这个filterOptions自动完成功能是以前使用的只有一个formControl，但当然不起作用。

当我使用ERROR Error: Cannot find control with unspecified name attribute时，错误是ERROR Error: Cannot find control with path: 'selectionArray -> '或类似formControlName="{{selectionArray[i]}}

一个屏幕快照，让您知道它的外观或外观：

Answer 1

您不能以selectionArray [i]的形式访问formarray控件，请尝试

<div *ngFor="let control of selectionArray.controls; let i = index">
...
   <input matInput placeholder="{{'CSV.CHOOSE' | translate}}" [matAutocomplete]="auto" formControlName="{{i}}">
...

</div>

Answer 2

两个让你们知道哪些更改有效：

  func setDownTriangle(){
        let heightWidth = triangleView.frame.size.width
        let path = CGMutablePath()

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x:heightWidth/2, y: heightWidth/2))
        path.addLine(to: CGPoint(x:heightWidth, y:0))
        path.addLine(to: CGPoint(x:0, y:0))

        let shape = CAShapeLayer()
        shape.path = path
        shape.fillColor = UIColor.blue.cgColor

        triangleView.layer.insertSublayer(shape, at: 0)
    }

角找不到具有未指定名称属性的控件

2 个答案: