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

相关的 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

为什么我的* ngIf条件不能识别错误并在满足条件时显示消息？

1 个答案: