如果表单项为空但用户提交表单，则在 Angular2 表单中显示错误

Question

我有一个 userForm 组，其中包含键 name、email 和 phone。我还有一个 onValueChanged 函数，可以订阅表单更改和验证数据。

 buildForm(): void {
    this.userForm = this.fb.group({
      'name': ['', [
          Validators.required,
        ]
      ],
      'email': [''],
      'phone':    ['', Validators.required]
    });

this.userForm.valueChanges
  .subscribe(data => this.onValueChanged(data));

我还有一个提交按钮，但如果用户不打印任何数据并提交表单，我的错误就不会显示。我该如何解决？

onSubmit() {
    this.submitted = true;
}

这是我的错误：

formErrors = {
    'name': '',
    // ...
  };

  validationMessages = {
    'name': {
      'required':      'Name is required.',
      'minlength':     'Name must be at least 4 characters long.',
      // ...
    },
    // ...
  };
}

我的 onValueChanged 函数：

 onValueChanged(data?: any): void {
    if (!this.registrationForm) return;
    const form = this.registrationForm;

    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control: any = form.controls[field];

      if (control && control.dirty && !control.valid) {
        const messages: string = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

我在这样的模板中使用我的验证：

<div [ngClass]="formErrors.email ? 'has-danger' : '' ">
    <label for="email">Email <span class="text-danger">*</span></label>
    <input type="email" formControlName="email"  id="email">
    <div class="form-control-feedback">{{formErrors.email}}</div>
</div>

Answer 1

您需要在 component.html（html 或您的 html 文件中写入 ngif 语句。例如下面的 phone formControl:

  <div *ngIf="!phone.valid && (phone.touched || submitted)">Required</div>

添加了phone.touched，以便仅在用户触摸 formControl 后才显示错误。

添加了 submitted，以便仅在用户尝试提交表单后才会显示错误。

如果表单项为空但用户提交表单，则在 Angular2 表单中显示错误

Show errors in Angular2 forms if form items empty, but user submit form

javascript

angular2-forms

angular