在 Angular 7 中解析 zip.errors?.['required'] 时遇到问题答案

【问题标题】：trouble parsing zip.errors?.['required'] in Angular 7在 Angular 7 中解析 zip.errors?.['required'] 时遇到问题
【发布时间】：2022-01-07 02:49:28
【问题描述】：

我一直在绞尽脑汁想弄清楚为什么这个解析错误不断发生。

在 [zip.errors?.['required']] 中的第 13 列出现意外的标记 [、预期的标识符或关键字]

我怀疑“？”是对寻找该键的错误数组的查询。我的搜索没有发现任何关于这个“？”的信息。句法。我见过的打字稿资源似乎假设我知道它是如何定义的。我很高兴看到指针。

谢天谢地，https://angular.io/guide/form-validation#validating-input-in-reactive-forms 上的代码示例可以正常工作，因此我的 Angular 库似乎没有问题。这是我遵循工作示例代码的模式后最简单的类和模板。

捐赠.component.ts

import { Component, NgZone, ViewChild, OnInit } from '@angular/core';
import { BackendService } from '../service/backend.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';


@Component({
  moduleId: module.id,
  selector: 'app-donate',
  templateUrl: './donate.component.html',
  styleUrls: ['./donate.component.scss']
})

export class DonateComponent implements OnInit {
  donateForm: FormGroup;

  ngOnInit(): void {
    this.donateForm = new FormGroup({
      name: new FormControl('', [Validators.required]),
      zip: new FormControl('', [Validators.required])
    });
  }
get name() { return this.donateForm.get('name')!; }
get zip() { return this.donateForm.get('zip')!; }
}

donate.component.html

<form [formGroup]="donateForm"#formDir="ngForm">

      <div [hidden]="formDir.submitted">

         <div class="form-group">
          <label for="zip">Zip code</label>
            <input formControlName="zip" name="zip" type="text" class="form-control form-control-sm" id="zip" required>
             <div *ngIf="zip.invalid && (zip.dirty || zip.touched)"
      class="alert alert-danger">
               <div *ngIf="zip.errors?.['required']">Billing zip code is required.</div> 
            </div>
          </div>
      </div>
  <!-- submit button removed for demo -->
</form>

第一个 ngIf 测试 zip.invalid 是否有效，因此 zip 属性似乎不是问题。使用 zip.errors 本身而不查询 errors 数组可以编译，但如果我们不是在寻找特定类型的错误，那么它就没有帮助。它似乎对我使用问号和数组感到犹豫。既然代码示例使用了该语法，为什么我的会坏掉？

【问题讨论】：

github.com/angular/angular/issues/34385

标签： angular validation

【解决方案1】：

由于您使用的是 Angular 7，因此您的情况下的 *ngIf 条件应为：

    <div *ngIf="zip.errors?.required">Billing zip code is required.</div>

zip.errors?.required 中的 ? 在 Angular 中被称为 safe navigation operator，以防止属性路径中出现空值和未定义值。 TypeScript 3.7 中引入了类似的概念，称为Optional Chaining

如果zip.errors 为null，并且我们不使用安全导航运算符，则在运行时尝试读取null 上的required 属性时会导致失败。 ? 保护我们免受此类运行时故障的影响。

在 [zip.errors?.['required']] 中的第 13 列出现意外的标记 [、预期的标识符或关键字]

Angular 7 不支持在模板表达式中使用安全导航运算符这种 (?.['required']) 方式，因此会出现错误。它适用于较新的版本（12.1.0 及更高版本）。

TypeScript 4.2 引入了一个新标志 noPropertyAccessFromIndexSignature，它不允许通过“点”表示法 (obj.key) 使用索引签名中的未知字段，并强制使用“索引”语法 (obj["key"])。

zip.errors?.['required'] 使用可选链接和通过索引语法访问索引签名属性。

【讨论】：