gpt4 book ai didi

angular - ngIf 导致错误 : Conditional Expression requires all 3 expressions at the end of expression

转载 作者:行者123 更新时间:2023-12-03 07:58:05 34 4
gpt4 key购买 nike

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

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

NG5002:解析器错误:条件表达式端口?.errors?['required'] 需要表达式末尾的所有 3 个表达式

我在这个页面上还有其他几个 *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>

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

enter image description here

最佳答案

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

关于angular - ngIf 导致错误 : Conditional Expression requires all 3 expressions at the end of expression,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75504803/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com