angular和react

by Luuk Gruijs

Luuk Gruijs著

如何在Angular中驗(yàn)證默認(rèn)和自定義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.

向您的用戶展示表單時(shí)，認(rèn)為他們非常友好，可以立即向他們反饋輸入的內(nèi)容是否正確。 除此之外，它還可能限制對(duì)服務(wù)器的請(qǐng)求數(shù)量。 在將表單提交到服務(wù)器之前，您將能夠捕獲99％的錯(cuò)誤。

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

當(dāng)使用React形式時(shí)，Angular僅提供一堆非常通用的驗(yàn)證器。 默認(rèn)的表單字段驗(yàn)證器為：

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

  min：該值應(yīng)大于一定數(shù)值。

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

  max：該值應(yīng)小于一定數(shù)值。

• required: the value cannot be empty

  必填：值不能為空

• requiredTrue: the value must be true

  requiredTrue：該值必須為true

• email: the value should be an email

  電子郵件：值應(yīng)為電子郵件

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

  minLength：該值應(yīng)包含最少數(shù)量的字符

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

  maxLength：該值應(yīng)包含最大字符數(shù)

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.

上述驗(yàn)證器很可能無法滿足您服務(wù)器的要求。 因此，您無法向用戶提供他們希望獲得的反饋并無法幫助他們提交正確的表單。 為此，您將需要自定義表單字段驗(yàn)證器。

創(chuàng)建自定義表單字段驗(yàn)證器 (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.

表單字段驗(yàn)證器是一種功能，它接受您的表單控件(即輸入字段)，并針對(duì)特定條件驗(yàn)證該表單控件的值。 一切正常時(shí)，此函數(shù)不返回任何內(nèi)容，或者一個(gè)對(duì)象指出發(fā)生了什么問題。

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.

定制驗(yàn)證器的一個(gè)非常常見的用例是檢查表單是否與服務(wù)器的清理規(guī)則匹配。 這意味著驗(yàn)證器檢查是否允許用戶輸入您的表單中的字符。 讓我們現(xiàn)在創(chuàng)建此表單驗(yàn)證器。

建立表格 (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:

要使用此驗(yàn)證器，我們需要?jiǎng)?chuàng)建一個(gè)表單并在其中定義它。 為此，我們將創(chuàng)建一個(gè)簡(jiǎn)單的用戶注冊(cè)表單。 我們使用React方式來創(chuàng)建表單。 可以這樣完成：

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:

現(xiàn)在，我們有了一個(gè)有效的React形式。 但是，我們沒有應(yīng)用任何表單驗(yàn)證。 要添加表單驗(yàn)證，我們只需將驗(yàn)證器傳遞給表單創(chuàng)建函數(shù)，如下所示：

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的必需驗(yàn)證器和電子郵件驗(yàn)證器。 我們還導(dǎo)入了自定義創(chuàng)建的validateCharacters驗(yàn)證器。 我們?nèi)匀灰龅淖詈笠患率窍蛭覀兊挠脩粽故緷撛诘腻e(cuò)誤。

向用戶呈現(xiàn)錯(cuò)誤 (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.

我們有兩個(gè)時(shí)刻要向用戶展示錯(cuò)誤：焦點(diǎn)從一個(gè)字段移到另一個(gè)字段，并且恰好在提交最終表單之前。

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

讓我們?yōu)榇藙?chuàng)建一個(gè)表單服務(wù)。 該服務(wù)可能看起來像這樣：

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方法接受要驗(yàn)證的表單，一個(gè)表單錯(cuò)誤對(duì)象以及一個(gè)是否檢查臟字段的布爾值。 然后，該函數(shù)循環(huán)遍歷所有窗體控件，并檢查該控件上是否有錯(cuò)誤。 如果有任何錯(cuò)誤消息，我們將找到來自validationMessages方法的正確錯(cuò)誤消息，并將其傳遞給表單錯(cuò)誤對(duì)象。

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

要在我們的組件中使用此錯(cuò)誤服務(wù)，我們必須執(zhí)行以下操作：

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

現(xiàn)在，最后一步是在模板中顯示錯(cuò)誤消息。 我們可以這樣做：

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.

如果在一個(gè)特定字段上有任何錯(cuò)誤，我們將顯示formErrors對(duì)象中的消息。 以下是完整的演示。 在田野里玩。 嘗試在名稱字段中填寫!#$^類的字符，并查看我們的自定義表單驗(yàn)證程序是否有效。 如果沒有錯(cuò)誤出現(xiàn)，請(qǐng)點(diǎn)擊注冊(cè)按鈕，查看成功消息。

結(jié)論 (Conclusion)

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

我希望本文能幫助您驗(yàn)證表單并在填寫表單時(shí)為用戶提供更好的體驗(yàn)。

在阿姆斯特丹找工作？ (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擔(dān)任高級(jí)前端開發(fā)人員。 我們正在尋找專門從事Angular，React，Java或Scala的中/高級(jí)開發(fā)人員。 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.

如果您認(rèn)為自己有最佳的工作條件，請(qǐng)給我發(fā)送電子郵件至luuk.gruijs@sytac.io ，我很樂意告訴您更多信息。

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

angular和react

總結(jié)

以上是生活随笔為你收集整理的angular和react_如何在Angular中验证默认和自定义React形式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。