为什么我的 *ngIf 条件无法识别错误并在满足条件时显示消息?

Question

>我有一个自定义验证器，我正在将其应用于输入字段。 如果表单值具有特定于自定义验证程序的错误，我的 ngIf 条件应该会显示错误消息。 它不显示消息，我不知道为什么。

在我的 TS 文件中：

export class ParentFinancialComponent implements OnInit {
// Set selected section value on load time.
selectedSectionGroup = {
sectionOne: false,
sectionTwo: true,
sectionThree: true,
sectionFour: true,
sectionFive: true,
sectionSix: true
};
public financialSectionTwo: FormGroup;
ngOnInit() {
this.initForm();
}
initForm() {
this.financialSectionTwo = this.formBuilder.group({
parents2017AdjustedGrossIncome: ['', [CustomValidators.onlyNumbers]],
parents2017IncomeTaxAmount: ['', [CustomValidators.onlyNumbers]],
parents2017TaxExemption: ['', [CustomValidators.onlyNumbers]]
});
get sectionTwo() { return this.financialSectionTwo.controls; }
}

在我的 HTML 中：

<div [hidden]="selectedSectionGroup.sectionTwo" class="tab-pane 
fade show active"
id="{{financialSectionEnum.SECTION_TWO}}" role="tabpanel">
<form [formGroup]="financialSectionTwo">
<p class="section-header">Section II</p>
<div class="form-group row" 
[hidden]="sectionOne.parentsIrsStatus.value === '3'">
<p class="col-lg-9"><b class="q-num">89)</b><span
[hidden]="sectionOne.parentsIrsStatus.value !== '1'" 
class="form-required">*</span>Income for 2017?<i
class="fa fa-info-circle" aria-hidden="true"></i></p>
<div class="col-lg-3">
<label class="sr-only">Adjusted gross
income</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input
maxlength="9"
formControlName="parents2017AdjustedGrossIncome"
id="parents2017AdjustedGrossIncome"
type="text"
class="form-control col-3 col-lg-12"
data-hint="yes"
>
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
<div
*ngIf="sectionTwo.parents2017AdjustedGrossIncome.touched && 
sectionTwo.parents2017AdjustedGrossIncome.errors.onlyNumbers"
class="alert text-danger m-0 p-0 col-md-12"
>
Enter an amount
</div>
</div>
</div>

如果我输入字母表，我应该会收到错误消息"输入金额"。 我还有其他依赖于多个自定义验证器的输入，因此检查输入字段是否"无效"将对我有所帮助。 我需要仅在触发特定自定义验证器时才显示消息。

Answer 1

您没有包含自定义验证器的实现：CustomValidators.onlyNumbers所以不能说逻辑出了什么问题......但是，以下实现可以得到您想要的！！

验证人：

CustomValidatorsOnlyNumbers(control: AbstractControl) {
var pattern = /^d+$/;
if ( pattern.test(control.value) == true ){ return true;} else {
return { onlyNumbers: true };
}
}

相关网页：

<div class="tab-pane fade show active" 
role="tabpanel">
<form [formGroup]="financialSectionTwo">
<p class="section-header">Section II</p>
<div class="form-group row" >
<p class="col-lg-9"><b class="q-num">89)</b><span
class="form-required">*</span>Income for 2017?<i
class="fa fa-info-circle" aria-hidden="true"></i></p>
<div class="col-lg-3">
<label class="sr-only">Adjusted gross
income</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input
maxlength="9"
formControlName="parents2017AdjustedGrossIncome"
type="text"
class="form-control col-3 col-lg-12"
data-hint="yes"
>
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
<div
*ngIf="financialSectionTwo.get('parents2017AdjustedGrossIncome').touched && financialSectionTwo.get('parents2017AdjustedGrossIncome').hasError('onlyNumbers')"
class="alert text-danger m-0 p-0 col-md-12"
>
Enter an amount
</div>
</div>
</div>
</div>
</form>
</div>

在这里完成工作堆栈闪电战