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

【问题标题】：Why is my *ngIf condition not recognizing the error and displaying the message when the condition is met?为什么我的 *ngIf 条件无法识别错误并在满足条件时显示消息？
【发布时间】：2019-07-17 18:53:02
【问题描述】：

我有一个要应用于输入字段的自定义验证器。如果表单值有特定于自定义验证器的错误，我的 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>

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

【问题讨论】：

标签： validation angular7 customvalidator

【解决方案1】：

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

验证器：

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

相关HTML：

    <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>

完成working stackblitz here

【讨论】：