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