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

Question

我正在使用 Angular 4，Reactive forms.I 想要在用户单击 Submit/Create 帐户按钮时显示验证错误消息。这是我正在使用的 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)
    }

}

Answer 1

类似

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

Answer 2

要通过 formGroup 获取表单控件的 touched、dirty、valid 等属性，请使用：

signupForm.controls.firstname.touched。同样的方法你可以获得其他属性，如有效和无效。

如果您已经创建了 FormControl 的单个对象，那么您可以作为 firstname.touched 访问该对象属性，而无需使用 formGroup.

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

Answer 3

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

onSubmit() {
    this.signupForm.markAllAsTouched();
}

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

Show Validation Message on submit in Angular 4 Reactive Forms

angular

forms

typescript

angular-reactive-forms