{"id":3111,"date":"2024-02-21T14:23:56","date_gmt":"2024-02-21T13:23:56","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3111"},"modified":"2024-02-21T14:23:56","modified_gmt":"2024-02-21T13:23:56","slug":"how-to-handle-angular-validator-errors-when-a-user-enters-a-value-not-included-in-a-list","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2024\/02\/21\/how-to-handle-angular-validator-errors-when-a-user-enters-a-value-not-included-in-a-list\/","title":{"rendered":"How to handle (Angular) validator errors when a user enters a value not included in a list?"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>creating and use validators to report errors when the input value (entered by user) is not in a defined list, is not that complicated. Here is a simple example:<\/p>\n\n\n\n<p>1 &#8211; First, let us create our component with a FormControl and validators. Then Use the form in our component&#8217;s template.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\r\nimport { FormBuilder, FormGroup, Validators } from '@angular\/forms';\r\n\r\n@Component({\r\n  selector: 'app-Brice-Nguenkam',\r\n  template: `\r\n    &lt;form &#91;formGroup]=\"myForm\">\r\n      &lt;input formControlName=\"myField\" \/>\r\n      &lt;div *ngIf=\"myForm.get('myField').hasError('notIncluded')\">\r\n        Invalid selection. Please select a value from the list.\r\n      &lt;\/div>\r\n    &lt;\/form>\r\n  `,\r\n})\r\nexport class MyComponent {\r\n  myForm: FormGroup;\r\n\r  optionsList:string&#91;] = &#91;'Option1', 'Option2', 'Option3'];\n  constructor(private fb: FormBuilder) {\r\n    this.myForm = this.fb.group({\r\n      myField: &#91;'', &#91;Validators.required, this.myIncludedValidator(this.optionsList)]],\r\n    });\r\n  }\r\n\r\n  myIncludedValidator(options: string&#91;]) {\r\n    return (control) => {\r\n      const value = control.value;\r\n      if (options.includes(value)) {\r\n        return null; \/\/ No error if the value is in the list\r\n      } else {\r\n        return { notIncluded: true }; \/\/ Error if the value is not in the list\r\n      }\r\n    };\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n<p>2 &#8211; Use validator:<\/p>\n\n\n\n<p>Here a custom validator called &#8220;<strong><em>myIncludedValidator<\/em><\/strong>&#8221; is created which ensures that the entered value is included in the specified list (Here &#8220;<strong><em>optionsList<\/em><\/strong>&#8220;). The validator is then used in our component&#8217;s FormGroup.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>creating and use validators to report errors when the input value (entered by user) is not in a defined list, is not that complicated. Here is a simple example: 1 &#8211; First, let us create our component with a FormControl and validators. Then Use the form in our component&#8217;s template. 2 &#8211; Use validator: Here [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[799,769],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3111"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3111"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3111\/revisions"}],"predecessor-version":[{"id":3112,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3111\/revisions\/3112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}