Angular 8 中的未定义冲突

Question

我正在使用 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]
      })
    });

在上面的代码this.step2.configuration中，配置是未定义的。我怎么能超过这个。我需要填写空值或 this.step2.configuration

之后的值

Answer 1

我在这里看到的唯一三种方式是：在开始时检查未定义并用虚拟模型覆盖

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 上可用）

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

在 angular 10 中，就像它（几乎）总是在 html-templates 中一样，一个问号检查属性是否可用，如果不可用，则用一个问号初始化 formControl null 值。请注意，直接调用表单字段也会产生 null 而不是 '' then.

Angular 8 中的未定义冲突

Undefined collision in Angular 8

javascript

typescript

angular

angular-reactive-forms

angular-forms