ngIf 导致错误：条件表达式需要在表达式末尾添加所有 3 个表达式

Question

我正在尝试在表单组中写入表单控件特定的验证错误消息。我在网上找到了几个教程和示例（例如这个），概述了一个看似简单的 *ngIf div，如果在控件上检测到错误，则显示错误消息。

问题是，当我尝试这样做时，我收到这个奇怪的错误

NG5002: Parser Error: Conditional expression port?.errors?['required'] requires all 3 expressions at the end of the expression

我在此页面上还有其他几个可以正常工作的 *ngIf 条件。这是我的相关代码

                <form-field labelText="Port" [hasError]="port?.invalid && (port?.dirty || key?.touched)" [isRequired]="true">
                    <input id="port" formControlName="port" type="password">
                    <ul *ngIf="port?.invalid && (port?.touched || key?.dirty)">
                        <li *ngIf="port?.errors?['required']">Port is Required</li>
                        <li *ngIf="port?.errors?['pattern']">Invalid Port Number</li>
                    </ul>
                </form-field>

    ngOnInit() {
        this.store.dispatch(SettingsActions.enterMaintenance());
        this.detailsForm = new FormGroup({
            id: new FormControl(''),
            name: new FormControl('', Validators.required),
            productName: new FormControl('', Validators.required),
            number: new FormControl('', Validators.required),
            isSamlAuthRequired: new FormControl(Boolean),
            iAdapterSetting: new FormGroup({
                server: new FormControl('', Validators.required),
                port: new FormControl('', [Validators.required, Validators.pattern(this.regexValidPort)]),
                key: new FormControl('', Validators.required),
                headerVersion: new FormControl('', Validators.required),
                iAdapterInstitutionId: new FormControl('', Validators.required),
                isSSL: new FormControl(Boolean),
                tlsSecurityStrength: new FormControl(''),
            }),
        });
        this.setValue();
    }
    get port() {
        return this.detailsForm.get('iAdapterSetting.port');
    }

我尝试添加像这样的内联条件替代。

                <form-field labelText="Port" [hasError]="port?.invalid && (port?.dirty || port?.touched)">
                    <input id="Port" formControlName="port" type="text">
                    <ul *ngIf="port?.invalid && (port?.touched || port?.dirty)" class="rui-form-validation-errors">
                        <li *ngIf="port?.errors?['required']: false">Port is Required</li>
                        <li *ngIf="port?.errors?['pattern'] : false">Invalid Port Number</li>
                    </ul>
                </form-field>

这实际上解决了构建错误，但这似乎不正确，并且根据我能找到的互联网上的每个示例，这应该是不必要的。最重要的是，它们仍然一起被评估为真实。钥匙好像没什么区别。如果其中一个条件触发，则两条消息都会显示，但这不是我需要的行为。

Answer 1

表达式port?.errors?['required']在 Typescript 中不是有效语法，因为属性检查运算符.?不仅仅是?. 您无法以这种方式访问​​可选属性。有效语法是port?.errors?.['required'].