{"flag":true,"single":true,"pageTitle":"Forms and form validation","post":{"id":149,"user_id":"1","slug":"form-validation-angular-using-local-template-reference-variable-tmjk","title":"Forms and form validation","body":"

HTML CODE<\/p>\r\n

1.  using  local template reference variable<\/p>\r\n

<form class=\"contact-form needs-validation\"  novalidate #myForm=\"ngForm\" (ngSubmit)=\"handleForm(myForm)\">\r\n  <input required email minlength=\"4\" type=\"email\" #email='ngModel' name=\"email\" ngModel>\r\n  \r\n  <div *ngIf=\"email.invalid && (email.dirty || email.touched)\" class=\"alert alert-danger\">\r\n      <div *ngIf=\"email.errors?.['required']\">\r\n        Email is required.\r\n      <\/div>\r\n      <div *ngIf=\"email.errors?.['minlength']\">\r\n        Email must be at least 6 characters long.\r\n      <\/div>\r\n      <div *ngIf=\"email.errors?.['email']\">\r\n        Its not correct Email\r\n      <\/div>\r\n      \r\n  <\/div>\r\n    <input type=\"submit\" class=\"btn btn-outline-primary rounded-pill btn-send mb-3\" value=\"Subscribe\" (click)=\"myForm.form.markAllAsTouched()\">\r\n<\/form><\/code><\/pre>\r\n
COMPONENT<\/p>\r\n
export class EmailSubscriptionComponent {\r\n  handleForm(data:any){\r\n    if (data.valid) {\r\n      \/\/ Form is valid, perform submission logic here\r\n    } else {\r\n      \/\/ Form is invalid, handle the validation errors or display an error message\r\n    }\r\n    console.log(data.value);\r\n  }\r\n}<\/code><\/pre>\r\n
FOR Select dropdown<\/p>\r\n
component.ts<\/p>\r\n
  subsForm_frequency:string ='0';<\/code><\/pre>\r\n
html<\/p>\r\n
<div class=\"col-4\">\r\n<div class=\"form-select-wrapper mb-4\">\r\n  <select class=\"form-select\" aria-label=\"Default select example\" name=\"frequency\"  [(ngModel)]=\"subsForm_frequency\">\r\n    <option value=\"0\">Alert Frequency<\/option>\r\n    <option value=\"1\">Daily<\/option>\r\n    <option value=\"2\">Weekly<\/option>\r\n  <\/select>\r\n<\/div>\r\n<\/div><\/code><\/pre>\r\n
Lets break down the code:<\/p>\r\n
<input><\/strong> element representing the email input field. It has the following attributes and directives:<\/p>\r\n
    \r\n
  • required<\/strong>: Specifies that the field must be filled in before submitting the form.<\/li>\r\n
  • email:<\/strong> Indicates that the input value should be a valid email address format.<\/li>\r\n
  • minlength=\"4\": Specifies the minimum length of the input value to be 4 characters.<\/li>\r\n
  • type=\"email\": Indicates that the input type is \"email\" to enable email-specific browser validation.<\/li>\r\n
  • #email='ngModel':<\/strong> Declares a local template reference variable \"email\" and assigns it to the NgModel directive for the input field.<\/li>\r\n<\/ul>\r\n
    To display the validation errors when the submit button is clicked, we use<\/p>\r\n
    (click)=\"myForm.form.markAllAsTouched()\"<\/code><\/pre>\r\n
     <\/p>\r\n
    SAME PASSWORD VALIDATION<\/strong><\/p>\r\n
    <input  type=\"password\" name=\"new_pass\" #new_pass='ngModel' ngModel  required=\"required\">\r\n<input  type=\"password\" name=\"new_pass_cnf\" #new_pass_cnf='ngModel' ngModel  required=\"required\">\r\n<div *ngIf=\"new_pass.value != new_pass_cnf.value\" class=\"alert alert-danger mt-2\">\r\n    Passwords don't match.\r\n<\/div><\/code><\/pre>\r\n
     <\/p>\r\n
    2. using Reactive form
    >>simple form<\/strong>
    component.ts<\/p>\r\n
     \/*\r\n    Reactive forms provide a model-driven approach to handling form inputs whose values change over time.\r\n    1. app.module.ts\r\n      > import { ReactiveFormsModule } from '@angular\/forms';\r\n      > imports: [\r\n         ReactiveFormsModule\r\n       ],\r\n    2. inside component\r\n      import { FormControl } from '@angular\/forms';\r\n      \r\n    3. use inside template\r\n      <label for=\"name\">Name: <\/label>\r\n      <input id=\"name\" type=\"text\" [formControl]=\"name\">\r\n  *\/\r\n      name = new FormControl('inital value');\r\n\r\n    updateName() {\r\n      this.name.setValue('Nancy');\r\n    }<\/code><\/pre>\r\n
    .html<\/p>\r\n
    <label for=\"name\">Name: {{name.value}}<\/label><br\/>\r\n<input id=\"name\" type=\"text\" [formControl]=\"name\">\r\n<button type=\"button\" (click)=\"updateName()\">Update Name<\/button>\r\n<hr><\/code><\/pre>\r\n
    >> FORM GROUP<\/strong><\/p>\r\n
    component.ts<\/p>\r\n
        \/* form group: a form group instance tracks the form state of a group of form control instances (for example, a form).\r\n      1. import { FormGroup } from '@angular\/forms';\r\n      2. USE FormGroup\r\n      3. to save data (ngSubmit)=\"onSubmit()\" its  captures the current value of profileForm. Use EventEmitter to keep the form encapsulated and to provide the form value outside the component. \r\n\r\n    \r\n    *\/\r\n\r\n    profileForm = new FormGroup({\r\n      firstName: new FormControl(),\r\n      address: new FormGroup({\r\n        street: new FormControl('bhera'),\r\n        city: new FormControl(''),          \r\n      })\r\n    });\r\n    updateProfile() {\r\n      this.profileForm.patchValue({\r\n        firstName: 'Nancy',\r\n        address: {\r\n          street: '123 Drew Street'\r\n        }\r\n      });\r\n    }\r\n\r\n    onSubmit() {\r\n      console.warn(this.profileForm.value);\r\n    }\r\n<\/code><\/pre>\r\n
    html<\/p>\r\n
        <h2>FORM GROUP<\/h2>\r\n    <form [formGroup]=\"profileForm\" (ngSubmit)=\"onSubmit()\">\r\n        <label for=\"first-name\">First Name: <\/label>\r\n        <input id=\"first-name\" type=\"text\" formControlName=\"firstName\">    \r\n        <div formGroupName=\"address\">\r\n            <h6>Address<\/h6>          \r\n            <label for=\"street\">Street: <\/label>\r\n            <input id=\"street\" type=\"text\" formControlName=\"street\">          \r\n            <label for=\"city\">City: <\/label>\r\n            <input id=\"city\" type=\"text\" formControlName=\"city\">\r\n          <\/div>\r\n          <button type=\"button\" (click)=\"updateProfile()\">Update Profile<\/button>\r\n        <button type=\"submit\" [disabled]=\"!profileForm.valid\">Submit<\/button>\r\n      <\/form>\r\n      <hr><\/code><\/pre>\r\n
    >> create form using service<\/p>\r\n
    component.ts<\/p>\r\n
        \/**\r\n     * Creating form control instances manually can become repetitive when dealing with multiple forms. The FormBuilder service provides convenient methods for generating controls.\r\n     * 1. import { FormBuilder } from '@angular\/forms';\r\n     * 2. constructor(private fb: FormBuilder) { }\r\n     * 3. \r\n     *\/\r\n    constructor(private fb: FormBuilder) { }\r\n    serviceForm = this.fb.group({\r\n      username: [''],\r\n      \r\n      services: this.fb.group({\r\n        misaj: [''],\r\n        polish: [''],\r\n      }),\r\n    });<\/code><\/pre>\r\n
    html<\/p>\r\n
          <h2>SERVICE TO CREATE FORM<\/h2>    \r\n      <form [formGroup]=\"serviceForm\">\r\n        <label>username: <\/label>\r\n        <input type=\"text\" formControlName=\"username\">      \r\n        <div formGroupName=\"services\">\r\n            <h6>services<\/h6>          \r\n            <input placeholder=\"misaj\" type=\"text\" formControlName=\"misaj\">          \r\n            <input placeholder=\"polish\" type=\"text\" formControlName=\"polish\">\r\n          <\/div>\r\n        <button type=\"submit\" [disabled]=\"!serviceForm.valid\">Submit<\/button>\r\n      <\/form><\/code><\/pre>\r\n
    >> FORM VALIDATION<\/p>\r\n
    component.ts<\/p>\r\n
        \/*\r\n      form validation: \r\n      1.import { Validators } from '@angular\/forms'; \r\n      2. firstName: ['', Validators.required], \/\/make field required\r\n      3. <p>Form Status: {{ profileForm.status }}<\/p>\r\n    *\/\r\nexport class FormsComponent{\r\n     formValid = new FormGroup({\r\n        nameis: new FormControl('', [Validators.required, Validators.minLength(4),forbiddenNameValidator(\/bob\/i)]),\r\n      });\r\n}\r\n\r\nexport function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {\r\n  return (control: AbstractControl): ValidationErrors | null => {\r\n    const forbidden = nameRe.test(control.value);\r\n    return forbidden ? {forbiddenName: {value: control.value}} : null;\r\n  };\r\n}\r\n<\/code><\/pre>\r\n
    html<\/p>\r\n
     <h2>Form validation<\/h2>\r\n      <form [formGroup]=\"formValid\">\r\n        <label>Name: <\/label>\r\n        <input type=\"text\" formControlName=\"nameis\" >\r\n        <div *ngIf=\"formValid.controls.nameis.invalid && (formValid.controls.nameis.dirty || formValid.controls.nameis.touched)\" class=\"alert alert-danger\">\r\n          <div *ngIf=\"formValid.controls.nameis.errors?.['required']\">\r\n            Name is required.\r\n          <\/div>\r\n          <div *ngIf=\"formValid.controls.nameis.errors?.['minlength']\">\r\n            Name must be at least 4 characters long.\r\n          <\/div>\r\n          <div *ngIf=\"formValid.controls.nameis.errors?.['forbiddenName']\">\r\n            Name cannot be Bob.\r\n          <\/div>\r\n        <\/div> \r\n    <p>Form Status: {{ formValid.status }}<\/p>\r\n<\/form><\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-05-18T04:22:14.000000Z","updated_at":"2023-06-05T05:09:34.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"HTML CODE 1.  using  local template reference variable <form class=\"contact-form needs-validation\"  novalidate #myForm=\"ngForm\" - Forms and form validation (Updated: June 5, 2023) - Read more about Forms and form validation at my programming site [SITE]","categories":[]}