Question

我在Angular（5）上有一个表单（模板驱动），当用户尝试提交表单时，我试图在输入时显示错误消息和类。

目前我能够这样做，但前提是用户与表单进行交互。到目前为止，这是我的代码：

input.ng-touched.ng-invalid {
    border-color: $color-error;
}

this.myForm = new FormGroup({
    name: new FormControl(null, [
        Validators.required,
        Validators.pattern(FormPattern.name)
    ])
}, {updateOn: 'submit'});

<form novalidate [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <fieldset>
        <input type="text" formControlName="name" />

        <div class="form_error" *ngIf="myForm.controls.name.touched && myForm.controls.name.errors">
            <small *ngIf="myForm.controls.name.errors.required">Required field</small>
            <small *ngIf="myForm.controls.name.errors.pattern">Invalid name</small>
        </div>
    </fieldset>

    <button>Submit</button>
</form>

但是，在提交时不会更改表单上的任何属性，而且，我没有找到像submited这样的属性，例如属性touched: true|false和untouched: true|false。< / p>

我已经在使用新选项{updateOn: 'submit'}但是如果表单被提交，我找不到识别方法。此外，属性dirty和pristine仍然就像表单没有交互一样。

Answer 1

如果您希望在表单无效时显示错误消息，可以使用

显示

<small *ngIf="!myForm.valid">Form is Invalid</small>

如果您想在提交时检查表格是否有效，您可以通过此方式（ngSubmit）=＆＃34; onSubmit（myForm.valid）＆＃34; 并在组件中

 onSubmit(valid)
    {
        if(valid==true){
             Form is valid
        }
    }

Answer 2

如果您想在提交前显示验证消息，可以使用：

<form #contactForm="ngForm" (ngSubmit)="contactForm.valid && sendMessage()">

    <input type="email" name="email" [(ngModel)]="formData.email" #email="ngModel" required email>

    <div *ngIf="contactForm.submitted && email.invalid">
        <div *ngIf="email.errors?.required">
            Please fill in the required fields.
        </div>
        <div *ngIf="email.errors?.email">
            Please enter a valid email address.
        </div>
    </div>

    ...
</form>

表单上的Angular show错误消息和无效的类提交

2 个答案: