如何在不使用响应式表单的情况下验证表单元素？

Question

我想在不使用 Reactive Forms 的情况下验证元素，我使用如下两种方式绑定：

 <input
                    type="text"
                    class="form-control"
                    autocomplete="off"
                    [required]="fieldDefinition.required"
                    [disabled]="fieldDefinition.disabled"
                    [(ngModel)]="fieldDefinition.fieldvalue"
                />

如果需要，如何在单击按钮后用红色突出显示元素？因此，我需要在单击按钮后验证所有字段。

Answer 1

Angular 使用 [(ngModel)] 添加 class ng-invalid ng-touched - 如果你使用 ReactiveForms

所以，你可以声明一个变量

submitted=false;

在按钮中

<button (click)="submitted=true">submit</button>

您的输入添加 class 当变量变为真时提交的

<input [class.submitted]="submitted" ....>

你可以定义一个 .css like

.submitted.ng-invalid
{
  border-color:red
}

你可以在this stackblitz

中看到一个简单的例子

如何在不使用响应式表单的情况下验证表单元素？

How to validate form element without using reactive forms?

angular

angular-forms