angular和react_如何在Angular中验证默认和自定义React形式

angular和react

by Luuk Gruijs

Luuk Gruijs着

如何在Angular中验证默认和自定义React形式 (How to validate default and custom reactive forms in Angular)

When presenting forms to your users, it’s considered very user-friendly to give them immediate feedback on whether what they type is actually correct. Besides that, it could also limit the number of requests to the server. You would be able to catch 99% of the errors before submitting your form to the server.

向您的用户展示表单时，认为他们非常友好，可以立即向他们反馈输入的内容是否正确。 除此之外，它还可能限制对服务器的请求数量。 在将表单提交到服务器之前，您将能够捕获99％的错误。

When using reactive forms, Angular offers only a hand full of very generic validators. The default form field validators are:

当使用React形式时，Angular仅提供一堆非常通用的验证器。 默认的表单字段验证器为：

• min: the value should be higher than a certain number.

  min：该值应大于一定数值。

• max: the value should be lower than a certain number.

  max：该值应小于一定数值。

• required: the value cannot be empty

  必填：值不能为空

• requiredTrue: the value must be true

  requiredTrue：该值必须为true

• email: the value should be an email

  电子邮件：值应为电子邮件

• minLength: The value should contain a minimum amount of characters

  minLength：该值应包含最少数量的字符

• maxLength: The value should contain a maximum amount of characters

  maxLength：该值应包含最大字符数

Chances are the above validators will not be able to match the requirements of your server. Therefore you cannot give the user the feedback they would like to get and help them submit a correct form. For this, you are going to need custom form field validators.

上述验证器很可能无法满足您服务器的要求。 因此，您无法向用户提供他们希望获得的反馈并无法帮助他们提交正确的表单。 为此，您将需要自定义表单字段验证器。

创建自定义表单字段验证器 (Creating a custom form field validator)

A form field validator is a function that takes your form control — the input field — and validates the value of that form control against a certain condition. This function either returns nothing when everything is ok or an object stating what went wrong.

表单字段验证器是一种功能，它接受您的表单控件(即输入字段)，并针对特定条件验证该表单控件的值。 一切正常时，此函数不返回任何内容，或者一个对象指出发生了什么问题。

A very common use case of a custom validator is to check whether the form matches the sanitization rules of the server. This means the validator checks if the characters your user puts into your form are allowed. Let’s create this form validator now.

定制验证器的一个非常常见的用例是检查表单是否与服务器的清理规则匹配。 这意味着验证器检查是否允许用户输入您的表单中的字符。 让我们现在创建此表单验证器。

建立表格 (Building the form)

To use this validator we need to create a form and define it there. For this purpose, we’re going to create a simple user signup form. We use the reactive way to create the form. It can be done like this:

要使用此验证器，我们需要创建一个表单并在其中定义它。 为此，我们将创建一个简单的用户注册表单。 我们使用React方式来创建表单。 可以这样完成：

The template can then look like this:

模板可以如下所示：

We now have a working reactive form. We, however, did not apply any form validation. To add form validation, we simply pass our validators into the form creation function like this:

现在，我们有了一个有效的React形式。 但是，我们没有应用任何表单验证。 要添加表单验证，我们只需将验证器传递给表单创建函数，如下所示：

We used the required and email validators from Angular. We also imported our custom created validateCharacters validator. The last thing we still have to do is present potential errors to our users.

我们使用了来自Angular的必需验证器和电子邮件验证器。 我们还导入了自定义创建的validateCharacters验证器。 我们仍然要做的最后一件事是向我们的用户展示潜在的错误。

向用户呈现错误 (Presenting errors to the user)

There are two moments when we want to present errors to our users: when the focus moves from one field to the other and right before the final form submission.

我们有两个时刻要向用户展示错误：焦点从一个字段移到另一个字段，并且恰好在提交最终表单之前。

Let’s create a form service for this. This service could potentially look like this:

让我们为此创建一个表单服务。 该服务可能看起来像这样：

The validateForm method accepts the form to validate, a form errors object and a boolean on whether to check dirty fields or not. The function then loops over all the form controls and checks if there are errors on that control. If there are any, we find the correct error message that came from the validationMessages method and pass back the form errors object.

validateForm方法接受要验证的表单，一个表单错误对象以及一个是否检查脏字段的布尔值。 然后，该函数循环遍历所有窗体控件，并检查该控件上是否有错误。 如果有任何错误消息，我们将找到来自validationMessages方法的正确错误消息，并将其传递给表单错误对象。

To use this error service in our components, we have to do the following:

要在我们的组件中使用此错误服务，我们必须执行以下操作：

Now the final step is to show the error messages in our template. We can do that like this:

现在，最后一步是在模板中显示错误消息。 我们可以这样做：

If there any errors on one particular field, we show the message that’s in the formErrors object. Below is a full demo. Play around with the fields. Try to fill in characters like !#$^ in the name field and see if our custom form validator works. If no errors appear, hit the signup button and see the success message.

如果在一个特定字段上有任何错误，我们将显示formErrors对象中的消息。 以下是完整的演示。 在田野里玩。 尝试在名称字段中填写!#$^类的字符，并查看我们的自定义表单验证程序是否有效。 如果没有错误出现，请点击注册按钮，查看成功消息。

结论 (Conclusion)

I hope this article helps you validate your forms and give your users a better experience when filling in the forms.

我希望本文能帮助您验证表单并在填写表单时为用户提供更好的体验。

在阿姆斯特丹找工作？ (Looking for a job in Amsterdam?)

I work for Sytac as a Senior front-end developer. We are looking for mid/senior developers that specialize in Angular, React, Java or Scala. Sytac is a very ambitious consultancy company in the Netherlands.

我在Sytac担任高级前端开发人员。 我们正在寻找专门从事Angular，React，Java或Scala的中/高级开发人员。 Sytac是荷兰一家雄心勃勃的咨询公司。

If you think you have what it takes to work with the best, send me an email on luuk.gruijs@sytac.io and I’m happy to tell you more.

如果您认为自己有最佳的工作条件，请给我发送电子邮件至luuk.gruijs@sytac.io ，我很乐意告诉您更多信息。

翻译自: https://www.freecodecamp.org/news/validating-reactive-forms-with-default-and-custom-form-field-validators-in-angular-5586dc51c4ae/

angular和react