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

Question

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

Unexpected token [, expected identifier or keyword at column 13 in [zip.errors?.['required']]

我怀疑是“？”是对查找该键的错误数组的查询。我的搜索没有显示任何关于这个“？”的信息。句法。我看到的 Typescript 资源似乎假设我知道它是如何定义的。我很高兴得到指点。

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

donate.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 本身而不查询错误数组可以编译，但如果我们不是在寻找特定类型的错误，那么它就没有帮助。它似乎对我使用问号和数组犹豫不决。既然代码示例使用了那个语法，为什么我的会出错？

Answer 1

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

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

zip.errors?.required中的?被称为safe navigation operator in Angular that guards against null and undefined values in property paths. Similar concept was introduced in TypeScript 3.7, referred to as Optional Chaining

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

Unexpected token [, expected identifier or keyword at column 13 in [zip.errors?.['required']]

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

TypeScript 4.2 引入了一个新标志 noPropertyAccessFromIndexSignature，它不允许通过 'dot' 符号（obj.key）使用索引签名中的未知字段，并强制使用 'indexed'语法（obj["key"]).

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

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

trouble parsing zip.errors?.['required'] in Angular 7

validation

angular