Question

在我的Angular应用程序的表单中，我试图仅在满足特定条件时显示div。

最初加载页面时，控制台中没有出现错误。并且下面的div不会出现（因为ngIf不正确）。

但是，当我提交表单和reset()表单时，出现以下错误：

错误TypeError：无法读取null的属性“值”

以下是出现错误的代码：

<div class="axis-form-group">
          <label class="axis-control-label">Injury Type:</label>
          <axis-radio-button-wrapper (getSelectedItem)="getSelectedItem($event)" formControlName="injuryType"
            name="injuryType" updateOn="click">
            <axis-radio cid="Bumps, scratches & damage" class="_text-bold" name="insuredType"
              value="Bumps, scratches & damage" heading="Bumps, scratches & damage" data-orientation="inline">
            </axis-radio>
            <axis-radio cid="Replacement of windows etc." name="insuredType" value="Replacement of windows etc."
              heading="Replacement of windows etc." data-orientation="inline">
            </axis-radio>
            <axis-radio cid="Burglary in the car" name="insuredType" value="Burglary in the car"
              heading="Burglary in the car" data-orientation="inline">
            </axis-radio>
            <axis-radio cid="Destroyed roof box, bicycle etc." name="insuredType"
              value="Destroyed roof box, bicycle etc." heading="Destroyed roof box, bicycle etc."
              data-orientation="inline">
            </axis-radio>
            <axis-radio cid="Wrong fuel" name="insuredType" value="Wrong fuel" heading="Wrong fuel"
              data-orientation="inline">
            </axis-radio>
            <axis-radio cid="Theft of license plates" name="insuredType" value="Theft of license plates"
              heading="Theft of license plates" data-orientation="inline">
            </axis-radio>
          </axis-radio-button-wrapper>
        </div>

<div class="axis-form-group" *ngIf="damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType.value.value === 'Burglary in the car' || damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType.value.value === 'Theft of license plates'">
    <label class="axis-control-label" for="scAlarm">Damge reported to the police:</label>
    <axis-checkbox-wrapper formControlName="damageReportedToPolice">
        <axis-checkbox cid="Yes" heading="Yes" name="Yes" value="Yes"></axis-checkbox>
    </axis-checkbox-wrapper>
</div>

在以下行上失败：

*ngIf="damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType.value.value === 'Burglary in the car' 
|| damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType.value.value === 'Theft of license plates'"

这是我的ngOnInit()：

ngOnInit() {
    this.damageDetailsTwoForm = this.fb.group({
        injuryTypeGp: this.fb.group({
            injuryType: new FormControl('', Validators.required),
            damageReportedToPolice: new FormControl(''),
            itemOwner: new FormControl(''),
            objectDescription: new FormControl(''),
        }),
    damageReported: new FormControl('', Validators.required),
    selfRiskAmount: new FormControl('', Validators.required),
    otherCompanyName: new FormControl('', Validators.required),
    policyNo: new FormControl('', Validators.required),
    });
}

这是我的getSelectedItem()：

getSelectedItem(data) {
    console.log(data);
    if (data.value === 'Burglary in the car' || data.value === 'Theft of license plates') {
      // tslint:disable-next-line: max-line-length
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].damageReportedToPolice.setValidators(Validators.required);
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].itemOwner.reset();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].itemOwner.clearValidators();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].objectDescription.reset();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].objectDescription.clearValidators();
    } else if (data.value === 'Destroyed roof box, bicycle etc.') {
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].itemOwner.setValidators(Validators.required);
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].objectDescription.setValidators(Validators.required);
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].damageReportedToPolice.reset();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].damageReportedToPolice.clearValidators();
    } else {
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].damageReportedToPolice.reset();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].damageReportedToPolice.clearValidators();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].itemOwner.reset();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].itemOwner.clearValidators();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].objectDescription.reset();
      this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].objectDescription.clearValidators();
    }
    this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].damageReportedToPolice.updateValueAndValidity();
    this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].itemOwner.updateValueAndValidity();
    this.damageDetailsTwoForm['controls'].injuryTypeGp['controls'].objectDescription.updateValueAndValidity();
  }

有人可以告诉我为什么会发生此错误以及如何解决吗？提前非常感谢！

Answer 1

您可以使用safe navigation operator并避免模板上出现此类错误。

*ngIf="damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType?.value.value === 'Burglary in the car.

尽管如此，由于找不到值，因此很可能找不到窗体控件。查看表单是否在当前点初始化

另一种情况是，由于您重置了表单，因此控件的值设置为null，并且您试图访问不存在的对象上的属性。您也可以在value属性上放置安全运算符

*ngIf="damageDetailsTwoForm['controls'].injuryTypeGp.controls.injuryType?.value?.value === 'Burglary in the car.

Answer 2

我会尝试使用get来提取该较长的条件。尝试这样的事情：

<div class="axis-form-group" *ngIf="validator">
  <label class="axis-control-label" for="scAlarm">Damge reported to the police:</label>
  <axis-checkbox-wrapper formControlName="damageReportedToPolice">
    <axis-checkbox cid="Yes" heading="Yes" name="Yes" value="Yes"></axis-checkbox>
  </axis-checkbox-wrapper>
</div>

ngOnInit() {
  this.damageDetailsTwoForm = this.fb.group({
    injuryTypeGp: this.fb.group({
      injuryType: ['', Validators.required],
      damageReportedToPolice: [''],
      itemOwner: [''],
      objectDescription: [''],
    }),
    damageReported: ['', Validators.required],
    selfRiskAmount: ['', Validators.required],
    otherCompanyName: ['', Validators.required],
    policyNo: ['', Validators.required],
  });
}


get validator() {
  const targetValues = ['Burglary in the car', 'Theft of license plates'];
  return targetValues.indexOf(this.damageDetailsTwoForm.get('injuryType').value.value) !== -1;
}

如何解决无法读取空错误的属性“值”？

2 个答案: