Angular 4表单验证和错误消息

我必须在应用程序中对表单进行验证。我用的是角度4。我的申请表上还有10张表格。我不知道我的问题是否正确。我真的对这个实现感到困惑

我的问题: 我需要在表单字段中添加验证，包括必填字段和验证，如电子邮件、电话号码等，如果用户输入表单，用户知道某些字段，用户可能不知道需要在其他字段中填写什么。但是需要保存有效字段，并且需要在表单中显示错误消息

---

如何在前端实现我正在使用Angular 4，后端使用nodejs

我建议在处理表单时使用ReactiveFormsModule。如果您不熟悉它，那么请查看文档，但这应该不是什么问题，因为它非常简单

form: FormGroup;

constructor(formBuilder: FormBuilder){
    this.form = formBuilder.group({
        name: ['', Validators.required],
        lastName: '',
        email: ['', [Validators.required, Validators.email]]
     });
 }

因此，这里发生的基本情况是，在处理被动表单时，我们需要一个

FormGroup

实例。我们使用

FormBuilder

类并调用其

group

方法，该方法获取我们想要创建的表单的对象并返回

FormGroup

实例。我们传递的对象的每个属性都将被称为FormGroup的FormControls，因此在本例中，我们将声明一个FormGroup，其中包含三个FormControls，即name、lastName和email

这些FormControl的值用于初始化，它可以是该FormControl的实际值，也可以是一个数组，其中第一个元素将是该FormControl的值，第二个元素将是一个

验证器fn

或

验证器fn

的数组

如您所见，我们定义了如下名称FormControl:

name:[''，Validators.required]

，这意味着初始值将是一个空字符串，并且需要此FormControl。lastName只是一个空字符串，因为我们不希望对该字段进行任何验证。电子邮件更有趣，因为这个FormControl需要不止一个验证器，所以我们向它传递一个数组

现在，在我们的模板中实现所有这些也是非常容易的

<form [formGroup]="form">
    <div>
        <input formControlName="email">
        <div *ngIf="form.get('email').hasError('required') && form.get('email').touched">This field is required</div>
        <div *ngIf="form.get('email').hasError('email') && form.get('email').touched">Invalid email format.</div>
    </div>
    ...

此字段必填
无效的电子邮件格式。
...

---

如果您不想让用户在表单有效之前提交表单：

SaveAs write，这个问题相当广泛。添加一个您正在处理的表单的示例可能会有所帮助。Angular有一份包含表单验证示例的文档：。希望这能帮助您开始。@stealththeninja这不仅仅是验证。我需要验证字段，同时我只需要将有效字段保存到db。我可以做的一件事是在保存前检查每个字段是否有效，我认为这不是个好主意。还有其他建议吗？我建议创建一个最小的、完整的、可验证的示例：。除此之外，我们正在猜测您试图构建和重复或链接到Angular文档的内容。