如何在ngFor

时间:2019-06-18 11:47:58

标签: angular angular-material-6

我正在使用Angular 7和Angular Material 6.4.1。我有一个带有员工部分的表格。默认情况下,表单有一个空的雇员信息可供选择,但是可以添加更多的雇员,因此我将需要重复整个部分(对于雇员数组为ngFor)。该部分具有指定的formControl所需的多个mat-select,但是当我在ngFor内设置mat-select时,我单击一个按钮以添加新员工,并且整个部分重复。所有mat-select触发事件hasError并变为红色。 员工数组:otEmployees-默认情况下为空 我尝试为FormControls创建动态名称,以便每个emp对象都有一个formControls数组

<pre>
<div *ngFor="let emp of otEmployees; let i = index" id="bottomLine">

            <div fxLayout="row" fxLayout.xs="column">
              <div>
                <mat-label >Employee ID </mat-label>
                <mat-label >{{emp.employeeId}}</mat-label>
              </div>

              <div>
                <mat-form-field>
                  <mat-label>Employee Name</mat-label>
                  <mat-select [formControl]="emp.emploFormControls[0]" required [(ngModel)]="emp.employeeName">
                    <mat-option>Select --</mat-option>
                    <mat-option *ngFor="let conseq of consequencesIfNotDone" [value]="conseq">`enter code here`
                      {{conseq.consequence1}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="selectedDivisionId < 1">Please choose a Division first</mat-error>
                  <mat-error *ngIf="emp.emploFormControls[0].hasError('required') && selectedDivisionId >= 1">Please choose an Employee
                    Name</mat-error>
                  <mat-hint>{{emp.emploFormControls[0].value?.sound}}</mat-hint>
                </mat-form-field>
              </div>
</div>
</div>
</div>
</pre>

预期复制带有mat-select的部分,并且每个部分独立工作。当前行为是复制所有垫选择触发器hasError并变成红色。

0 个答案:

没有答案