在 angular 中的 ngClass 中使用 form.controls.errors.(myError)(错误来自 AbstractControl)时遇到问题
having problem using form.controls.errors.(myError) (error is from AbstractControl) in ngClass in angular
我已经使用 abstractControl 创建了一个验证(在 ReactiveForm 中)并想在 ngClass 中使用它。
这是我的代码:
inputForm = new FormGroup({
current_password: new FormControl('', [
Validators.required
]),
new_password: new FormControl('', [
Validators.required
]),
re_new_password: new FormControl('', [
Validators.required
])
}, [
(form: AbstractControl) => {
if (form.value.new_pass === form.value.re_new_pass) {
return null;
}
return { equation: true }
}
])
html:
<form [formGroup]="inputForm">
<div>
<label>Current Password : </label>
<input class="form-input" formControlName="current_password">
</div>
<div>
<label>Password : </label>
<input class="input-form" formControlName="new_password" [ngClass]="{ 'red-border': inputForm.errors.equation }">
</div>
<div>
<label>Password Confirmation : </label>
<input class="input-form" formControlName="re_new_password" [ngClass]="{ 'red-border': inputForm.errors.equation }">
</div>
</form>
当此表格获得有效方程式时,错误将变为 null 并且
那就是我对 ngClass 有疑问的地方
因为没有调用 'equation'
的错误
我该如何解决这个问题?
您需要 ?.
可选链接来避免可能为空的错误。
因为 FormGroup 的错误是 ValidationErrors
或 null
类型。
errors: ValidationErrors | null
<input
class="input-form"
formControlName="new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation }"
/>
<input
class="input-form"
formControlName="re_new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation }"
/>
并更正 new_pass
和 re_new_pass
不存在的说法,因为 FormControl
(打字错误)如下:
if (form.value.new_password === form.value.re_new_password)
像下面这样更改您的 .ts 文件
inputForm = new FormGroup({
current_password: new FormControl('', [
Validators.required
]),
new_password: new FormControl('', [
Validators.required
]),
re_new_password: new FormControl('', [
Validators.required
])
}, [
(form: FormGroup) => {
if (form.controls.new_password.value === form.controls.re_new_password.value) {
return null;
}
return {equation: true}
}
])
你的模板必须是这样的
<form [formGroup]="inputForm">
<div>
<label>Current Password : </label>
<input class="form-input" formControlName="current_password">
</div>
<div>
<label>Password : </label>
<input class="input-form" formControlName="new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation}">
</div>
<div>
<label>Password Confirmation : </label>
<input class="input-form" formControlName="re_new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation}">
</div>
</form>
注意问号。它确保您不会看到 null 和 undefined。
我已经使用 abstractControl 创建了一个验证(在 ReactiveForm 中)并想在 ngClass 中使用它。
这是我的代码:
inputForm = new FormGroup({
current_password: new FormControl('', [
Validators.required
]),
new_password: new FormControl('', [
Validators.required
]),
re_new_password: new FormControl('', [
Validators.required
])
}, [
(form: AbstractControl) => {
if (form.value.new_pass === form.value.re_new_pass) {
return null;
}
return { equation: true }
}
])
html:
<form [formGroup]="inputForm">
<div>
<label>Current Password : </label>
<input class="form-input" formControlName="current_password">
</div>
<div>
<label>Password : </label>
<input class="input-form" formControlName="new_password" [ngClass]="{ 'red-border': inputForm.errors.equation }">
</div>
<div>
<label>Password Confirmation : </label>
<input class="input-form" formControlName="re_new_password" [ngClass]="{ 'red-border': inputForm.errors.equation }">
</div>
</form>
当此表格获得有效方程式时,错误将变为 null 并且 那就是我对 ngClass 有疑问的地方 因为没有调用 'equation'
的错误我该如何解决这个问题?
您需要 ?.
可选链接来避免可能为空的错误。
因为 FormGroup 的错误是 ValidationErrors
或 null
类型。
errors: ValidationErrors | null
<input
class="input-form"
formControlName="new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation }"
/>
<input
class="input-form"
formControlName="re_new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation }"
/>
并更正 new_pass
和 re_new_pass
不存在的说法,因为 FormControl
(打字错误)如下:
if (form.value.new_password === form.value.re_new_password)
像下面这样更改您的 .ts 文件
inputForm = new FormGroup({
current_password: new FormControl('', [
Validators.required
]),
new_password: new FormControl('', [
Validators.required
]),
re_new_password: new FormControl('', [
Validators.required
])
}, [
(form: FormGroup) => {
if (form.controls.new_password.value === form.controls.re_new_password.value) {
return null;
}
return {equation: true}
}
])
你的模板必须是这样的
<form [formGroup]="inputForm">
<div>
<label>Current Password : </label>
<input class="form-input" formControlName="current_password">
</div>
<div>
<label>Password : </label>
<input class="input-form" formControlName="new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation}">
</div>
<div>
<label>Password Confirmation : </label>
<input class="input-form" formControlName="re_new_password"
[ngClass]="{ 'red-border': inputForm.errors?.equation}">
</div>
</form>
注意问号。它确保您不会看到 null 和 undefined。