在 Angular 4 响应式表单中提交时显示验证消息

Posted

技术标签:

【中文标题】在 Angular 4 响应式表单中提交时显示验证消息【英文标题】:Show Validation Message on submit in Angular 4 Reactive Forms 【发布时间】:2017-11-30 03:33:07 【问题描述】:

我正在使用 Angular 4,反应式表单。我想在用户单击提交/创建帐户按钮时显示验证错误消息。 这是我正在使用的 html 和打字稿代码。

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">

  <div class="form-group">
    <input type="text" 
           id="firstname" 
           name="firstname" 
           formControlName="firstname" 
           placeholder="First Name">
    <span *ngIf="!signupForm.get('firstname').valid && signupForm.get('firstname').touched" 
           class="help-block"> Please Enter First Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <input type="text" 
           id="lastname" 
           name="lastname" 
           formControlName="lastname" 
           placeholder="Last Name">
    <span *ngIf="!signupForm.get('lastname').valid && signupForm.get('lastname').touched" 
           class="help-block"> Please Enter Last Name (Minimum 2 Characters)</span>
  </div>

  <div class="form-group">
    <button type="submit" 
            class="btn btn-success btn-lg btn-qte">Create Account</button>
  </div>

</form>

键入脚本代码


export class UserRegistrationComponent implements OnInit 
    signupForm: FormGroup;

    ngOnInit() 
        this.signupForm = new FormGroup(
            'firstname': new FormControl(null, [Validators.required, Validators.minLength(2)]),
            'lastname': new FormControl(null, [Validators.required, Validators.minLength(2),]),
            'businessname': new FormControl(null),
            'phonenumber': new FormControl(null, [Validators.required]),
            'email': new FormControl(null, [Validators.required, Validators.email]),
            'password': new FormControl(null, [Validators.required]),
            'confirmpassword': new FormControl(null, Validators.required)

        );
    

    onSubmit() 
        console.log(this.signupForm)
    


【问题讨论】:

【参考方案1】:

您可以使用 from markAllAsTouched() 方法执行此操作。 它会将所有表单控件标记为已触摸,并在需要时触发验证错误

onSubmit() 
    this.signupForm.markAllAsTouched();

【讨论】:

【参考方案2】:

要通过formGroup获取表单控件的toucheddirtyvalid等属性,请使用:

signupForm.controls.firstname.touched。同样的方式你可以得到其他属性,如有效和无效。

如果您创建了 FormControl 的单个对象,那么您可以在不使用 formGroup 的情况下以 firstname.touched 访问该对象属性。

有关模型驱动表单中验证的更多信息,请参阅Model Driven Form Validations 此处。

【讨论】:

【参考方案3】:

类似

onSubmit() 
    console.log(this.signupForm)
    this.signupForm.controls['firstname'].markAsTouched()

【讨论】:

以上是关于在 Angular 4 响应式表单中提交时显示验证消息的主要内容,如果未能解决你的问题,请参考以下文章

动态禁用控件时显示警告消息 angular2

提交后在 Angular 的响应式表单上显示客户端错误和服务器错误

在 laravel 集体中提交表单时显示加载器

jQuery Validation,在提交时显示有效/无效的表单选项卡

angular12表单错误提示不显示边框

Angular 11 自定义 ISBN 验证器响应式表单