Javascript 角度8中的未定义碰撞

我正在使用Angular 8和

“typescript”：“~3.5.3”

。正在尝试执行未定义的碰撞

const { testLocation } = this.ngr.getState();
    this.step2 = testLocation && testLocation.step2 ? testLocation.step2 : {};
    this.$form = this.fb.group({
      // tslint:disable-next-line: max-line-length
      email: [this.step2.email || '', [Validators.required, Validators.email, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
      phone: [this.step2.phone || ''],
      configuration: this.fb.group({
        idTypesAccepted: this.buildIdentityDocumentTypeFormArr(this.identityDocumentType),

        sessionOpenDays: [this.step2.configuration.sessionOpenDays || '', Validators.required],
        sessionOpenHours: [this.step2.configuration.sessionOpenHours || '', Validators.required],
        sessionOpenMinutes: [this.step2.configuration.sessionOpenMinutes || '', Validators.required],

        sessionCloseDays: [this.step2.configuration.sessionCloseDays || '', Validators.required],
      sessionCloseHours: [this.step2.configuration.sessionCloseHours || '', Validators.required],
        sessionCloseMinutes: [this.step2.configuration.sessionCloseMinutes || '', Validators.required],

        applicationExpiryDays: [this.step2.configuration.applicationExpiryDays || '', Validators.required],
        applicationExpiryHours: [this.step2.configuration.applicationExpiryHours || '', Validators.required],
        applicationExpiryMinutes: [this.step2.configuration.applicationExpiryMinutes || '', Validators.required],

        paymentCloseDays: [this.step2.configuration.paymentCloseDays || '', Validators.required],
        paymentCloseHours: [this.step2.configuration.paymentCloseHours || '', Validators.required],
        paymentCloseMinutes: [this.step2.configuration.paymentCloseMinutes || '', Validators.required]
      })
    });

---

在上述代码

本.step2.配置中，配置未定义。我怎样才能超越这个。我需要填充空值或从此处开始的值。步骤2.配置

我在这里看到的唯一三种方法是： 检查开始时是否未定义，并使用虚拟模型替代

this.step2 = testLocation && testLocation.step2 ? testLocation.step2 : {};
if(!this.step2.configuration) {
  this.step2.configuration = new Configuration(); // filling the blanks with a dummy data model which has nulled or '' variables;
}

或者复制整个模板建筑

if(!this.step2.configuration) {
  this.fb.group({
    sessionOpenDays: ['', Validators.required],
    [...]
  });
  return;
}
this.fb.group({[...]});

或者您可以切换到Angular 10（不确定是哪个版本的9引入了此功能，但它肯定在10上可用）

在angular 10中，就像它（几乎）总是在html模板中一样，问号检查属性是否可用，如果不可用，则使用

null

值初始化formControl。但是请注意，对表单字段的直接调用也会产生null而不是“”

this.step2 = testLocation && testLocation.step2 ? testLocation.step2: {};
this.fb.group({
  sessionOpenDays: [this.step2.configuration?.sessionOpenDays || '', Validators.required],
[...]
});