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表单中的错误，但用户提交表单

1 个答案: