加载新的 ng-container 时未初始化表单值

Question

Plunkr link: https://plnkr.co/edit/MOQ1evhsAocw3cJrYM0q?p=preview

我的 HTML 模板中有以下 ngSwitch 代码：

<ng-container [ngSwitch]="f.value.visitFrequency">
  <ng-container *ngSwitchCase="'weekday'">
    <div class="row form-group" ngModelGroup="weekday">
      <div class="btn-group btn-group-justified" data-toggle="buttons" role="group">
        <label class="btn btn-info"
               *ngFor="let wday of wdays" 
               [class.active]="f.value.weekday[wday]">
          <input type="checkbox"
                 [name]="wday"
                 [id]="wday"
                 ngModel
                 [value]="wday">{{ wday }}
        </label>
      </div>
    </div>
  </ng-container>
  <ng-container>
    <div class="row form-group" *ngSwitchDefault>
      <p>Please choose something</p>
    </div>
  </ng-container>
</ng-container>

我有一个单选按钮组，它选择一个值然后设置为 visitFrequency，例如weekday。现在，每当我选择这个（其他可能的值相同）时，我都会收到以下错误：

ERROR TypeError: Cannot read property 'Monday' of undefined

星期一是数组 wdays 中的第一个值，它正在循环创建复选框（如果不清楚的话）。

我只收到这个错误，我没有收到 Tuesday 的相同错误。这是始终如一的。当我选择一个差异 visitFrequency 时，我仍然收到错误，但同样只有数组中正在循环的第一项。

我怀疑表单值尚未初始化，因此抛出错误。问题是它不会在加载组件时发生。

Answer 1

我知道你现在有什么问题了。这是你对 ngModelGroup 的误用。您在启动之前使用它的值。

请参阅 [class.active]="f.value.weekday[wday]"，如果您从 plunkr 中删除此代码，它可以正常工作。当然，这不是你想要的。

#1

查看我的 fork plunkr https://plnkr.co/edit/CYkVFt4mb7sq98riviIZ?p=preview。我创建了一个 checkClass 来记录表单的值。显然，ngModuleGroup 在第二轮更改检测之前获取其子控件的值。

这是避免错误的糟糕方法，因为每次更改检测都会调用该方法。

#2

还有一个办法，看这个参考：这个参考问题.

您可以创建一个指令来检测 switch case 的启动。然后将{monday: '', tuesday: '' //...}这样的初始值对象赋值给ngModelGroup，这样你可能不会报错，性能会更好。

#3

忘记提及一项原生支持，~~如 f.value?.weekday?[wday]~~。 Angular haven't support the syntax like arr?[x] yet。解决方法应该是 f.value?.weekday && f.value.weekday[wday]

加载新的 ng-container 时未初始化表单值

Form values not initialized when new ng-container is loaded

angular

angular-forms

#1

#2

#3