動態獲取輸入字段的值后顯示錯誤消息

Question

我有一個用於添加記錄的表單，我可以選擇編輯它們。 我新添加的下拉菜單是強制性的。 因此，我在該字段上使用了驗證器，該字段在提交表單后給出了字段是必需的錯誤，它適用於添加新記錄。 對於我有條件的編輯記錄，該字段是新添加的，因此對於現有記錄，該字段將為空，當用戶嘗試更新記錄時，它應該為新字段提供所需的錯誤並且不允許保存。 因為該字段是強制性的，所以我最初將其設置為 0，因此永遠不會拋出所需的錯誤。 我想寫一個條件，比如 if field.value==0 然后顯示錯誤我該如何為角度的反應形式做到這一點？

我的編輯表單 HTML

                        <div class="col-xl-7">
                            <span data-qa="largedepositconstraintedit">
                                <label data-qa="edit-large-deposit-constraint"
                                for="edit-ldc-Description">LDC</label>
                            <span>
                            <label class="fdl-select">
                                <ddrm-validated-input
                                [control]="newHoldSchedule.get('ldcForm')"
                                [path]="'ldcForm'">

                                <select class="form-control"
                                id="largedepositconstraint-edit"
                                data-qa="largedepositconstraint-select"
                                formControlName="ldcForm"
                                required>
                                    <option
                                        id="largedepositconstraint-edit-{{type.value}}"
                                        *ngFor="let type of ldConstraint"
                                        [value]="type.value"
                                        [selected]="type.value == row.ldcAmt"
                                        required>{{type.value}}
                                    </option>
                                </select>
                            </ddrm-validated-input>
                            </label>
                            </span>
                            </span>
                        </div>

.ts 文件：

this.newHoldSchedule = this.formBuilder.group({
              ldcForm: [(row.ldcAmt != null ? row.ldcAmt : ' ')'), Validators.required],
});

我想要一個條件 if type.value==0 然后顯示錯誤消息。 有沒有辦法做到這一點？

Answer 1

您可以在 Angular 中使用自定義驗證器。 谷歌它以獲取更多信息。 但我會根據您的情況為您留下一個自定義驗證器功能：

equalToZero(control: AbstractControl): ValidationErrors {
  return control.value !== 0 ? undefined : {
      equalToZero: true
  };
}

您只需將其集成到您的控件中，例如：

this.newHoldSchedule = this.formBuilder.group({
    ldcForm: [(row.ldcAmt != null ? row.ldcAmt : ' ')'), [Validators.required, this.equalToZero]],
        });

然后，在您的 HTML 中捕獲它，例如：

<div *ngIf="newHoldSchedule.get('ldcForm').errors?.equalToZero">
  <small>You cannot use 0 as value.</small>
</div>