Question

我需要创建一个带有mat-select控件（CoordinatorX）的FormArray的窗体，如下图所示：

产生以上表格的代码如下：

component.html：

function next(alerts) {
  if ((startPos + increment) < alerts.length) {
    startPos++;

    d3.selectAll('tbody')
      .selectAll('tr')
      .data(alerts.slice(startPos, (startPos + increment)))
      .each(function (d) {
        var self = d3.select(this);
            self.selectAll("td")
                .data(function(row, i) {
                  return [
                    {
                      column: "Source Country",
                      value: row.country
                    },
                    {
                      column: "Target Country",
                      value: row.targetCountry
                    },
                    {
                      column: "Date Created",
                      value: row.dateCreated
                    },
                    {
                      column: "Attack Type",
                      value: row.analyzerType
                    },
                    {
                      column: "Parameter",
                      value: row.requestString
                    }
                  ];
                })
                .text(function(d) {
                  return d.value; 
                });
        })
  }
}

component.ts：

<span formArrayName="coordinators" class="col-12" *ngIf="coordinators.controls.length > 0">
    <span class="row" *ngFor="let coord of coordinators.controls; let i = index" [formGroupName]="i">

        <mat-form-field class="col-10 col-md-11 col-lg-10">
            <mat-select formControlName="name" placeholder="Coordinator {{i}}">
                <mat-option [value]="admin.name" *ngFor="let admin of (cNgo$ | async)?.admin"> {{ admin.phone}} - {{ admin.name }} </mat-o
            </mat-select>
        </mat-form-field>

        <div class="col-2 col-md-1 col-lg-2">
            <button type="button" (click)="removeCoordinator(i)" mat-icon-button *ngIf="i > 0">
                <mat-icon aria-label="Delete">delete</mat-icon>
            </button>
        </div>

    </span>
</span>

到目前为止，它运行良好。我可以从3个return this.fb.group({ name : ['', [ Validators.required, Validators.minLength(v.name.minLength), Validators.maxLength(v.name.maxLength) ]], shortCode : ['', [ Validators.required, Validators.minLength(v.shortCode.minLength), Validators.maxLength(v.shortCode.maxLength) ], [ EventValidator.shortCodeValidator(that.http) ]], coordinators : this.fb.array([this.fb.group({ id : '', name : '', phone : '', email : '' }), this.fb.group({ id : '', name : '', phone : '', email : '' }), this.fb.group({ id : '', name : '', phone : '', email : '' })]), });控件中选择一个选项。

但是我尝试通过以下代码动态添加另一个协调器：

mat-select

它按预期添加了新控件。但是当我单击它时，它没有显示选项。任何进一步动态添加的addCoordinator() { this.coordinators.push(this.fb.group({ id : '', name : '', phone : '', email : '' })); console.log(this.eventForm); }控件均无法正常工作。

请帮忙吗？

PS：我正在使用Angular材质控件

Answer 1

我认为您可能需要使arrayFormControl具有反应性

<span [formArrayName]="coordinators"...>

角反应形式：垫选择的FormArray

1 个答案: