Fetching FormControl from Directive in Angular

Question

Fetching FormControl from Directive in Angular

Is there a way to dynamically add validators to a FormControl through a custom Directive?

@Directive({
    selector: "[idNumber]",
})
export class IdNumberDirective implements OnInit {

    constructor(private formControl: FormControl) { }

    ngOnInit() {
        this.addValidators(this.formControl);
    }

    addValidators(formControl: FormControl) {
        formControl.setValidators(Validators.compose(
            [Validators.required,
            Validators.minLength(3),
            Validators.maxLength(8)
            ]
        ));
    }



<mat-form-field>
    <mat-label>{{label}}</mat-label>
    <input matInput
        [formControl]="idNumberFormControl"
        [placeholder]="placeholder"
</mat-form-field>

I want to avoid using ElementRef to reference the native element.
Instead, I prefer to work with the formControl directly...
...The desired usage would be as follows:

// Using my 'idNumber' directive in HTML ////////
<custom-input-string
    idNumber 
    [name]="'idNumber'"
    [label]="Id Number"
    [placeholder]="">
</custom-input-string>

// In TypeScript file ////////
@ViewChild(CustomInputStringComponent) child: CustomInputStringComponent;

ngAfterViewInit() {
    setTimeout(() => {
        this.child.insertIntoForm(this.signupForm);
    }, 0);
}

Any thoughts or suggestions?
Many thanks.

angular typescript angular-directive

Answer 1

Answer №1

Learn how to enhance your form control with validators using a directive.

Check out the code on Stackblitz

Keep in mind that implementing this may overwrite any existing validators you have set up.

constructor(
  // Access the control directive
  private control: NgControl
) { }
ngOnInit() {
  const abstractControl = this.control.control;
  abstractControl && abstractControl.setValidators([Validators.required]);
}

Answer 2

Learn how to enhance your form control with validators using a directive.

Check out the code on Stackblitz

Keep in mind that implementing this may overwrite any existing validators you have set up.

constructor(
  // Access the control directive
  private control: NgControl
) { }
ngOnInit() {
  const abstractControl = this.control.control;
  abstractControl && abstractControl.setValidators([Validators.required]);
}

Answer 3

Answer №2

By utilizing NgControl and constructor DI injection, we have the ability to create a directive that can be applied to form controls in both reactive forms using formControlName or template-driven forms:

Custom Directive Example:

import { Directive } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[my-custom-directive]'
})
export class MyCustomDirective {
  constructor(private elementRef: ElementRef, private control : NgControl) { }

}

Answer 4

By utilizing NgControl and constructor DI injection, we have the ability to create a directive that can be applied to form controls in both reactive forms using formControlName or template-driven forms:

Custom Directive Example:

import { Directive } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[my-custom-directive]'
})
export class MyCustomDirective {
  constructor(private elementRef: ElementRef, private control : NgControl) { }

}

Answer 5

Answer №3

The most efficient and simplistic method involves utilizing the NG_VALIDATORS provider:

import { Directive } from '@angular/core'
import { NG_VALIDATORS ValidationErrors, Validator } from '@angular/forms'

@Directive({
  selector: '[myIdValidator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: IdValidatorDirective, multi: true }
  ],
})
export class IdValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    // custom validation logic goes here
    return null
  }
}

Answer 6

The most efficient and simplistic method involves utilizing the NG_VALIDATORS provider:

import { Directive } from '@angular/core'
import { NG_VALIDATORS ValidationErrors, Validator } from '@angular/forms'

@Directive({
  selector: '[myIdValidator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: IdValidatorDirective, multi: true }
  ],
})
export class IdValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    // custom validation logic goes here
    return null
  }
}

Answer 7

Answer №4

If you want to utilize both FormGroup and FormControl within your directive, you can easily achieve this by using FormGroupDirective:

Note that in the following example, I am working on implementing a country selection feature.

import { FormGroupDirective } from "@angular/forms";

Subsequently:

{
constructor(private fg: FormGroupDirective) { }


// Retrieve the FormGroup
console.log('Values of My FormGroup: ', this.fg.value);

// Obtain the FormControl
console.log('The selectedCountryCtrl: ', this.fg.control.controls.selectedCountryCtrl);
console.log('Value of the selectedCountryCtrl: ', this.fg.control.controls.selectedCountryCtrl.value);

// Directly access the variable/object
console.log('Value of my selectedCountry FormControl: ', this.fg.value.selectedCountry);
}

Answer 8

If you want to utilize both FormGroup and FormControl within your directive, you can easily achieve this by using FormGroupDirective:

Note that in the following example, I am working on implementing a country selection feature.

import { FormGroupDirective } from "@angular/forms";

Subsequently:

{
constructor(private fg: FormGroupDirective) { }


// Retrieve the FormGroup
console.log('Values of My FormGroup: ', this.fg.value);

// Obtain the FormControl
console.log('The selectedCountryCtrl: ', this.fg.control.controls.selectedCountryCtrl);
console.log('Value of the selectedCountryCtrl: ', this.fg.control.controls.selectedCountryCtrl.value);

// Directly access the variable/object
console.log('Value of my selectedCountry FormControl: ', this.fg.value.selectedCountry);
}

Answer 9

Answer №5

//CustomComponent.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IdNumberValidator } from '../validators/IdNumberValidator';

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css'],
  providers:[IdNumberValidator]
})
export class CustomComponent implements OnInit {
  customForm: FormGroup;

  constructor(fb: FormBuilder, idNumberValidator : IdNumberValidator) { 
    this.customForm = fb.group({
      idFormControl: new FormControl(null,
          Validators.compose([
            Validators.required,
            Validators.minLength(3),
            Validators.maxLength(8),
          idNumberValidator.validate()
          ])
        ),
    })
  }
}

//IdNumberValidator.ts

import { Directive, OnInit } from '@angular/core';
import { Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[idValidator]'
})
export class IdNumberValidator implements OnInit {

  constructor() {

  }

  ngOnInit() {

  }

  validate(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value !== "Sachin") {
        return { "customError": { inValid: true, errMsg: 'Invalid Value' } };
      }
      return null;
    }
  }
}


//custom.component.html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <form [formGroup]="customForm">
      <input idValidator formControlName="idFormControl" />
      <div *ngIf="customForm.get('idFormControl').invalid && customForm.get('idFormControl').errors.customError.inValid"
        style="color:red">
        {{customForm.get('idFormControl').errors.customError.errMsg}}
      </div>
    
      <button type="submit">Submit</button>
    </form>

Answer 10

//CustomComponent.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IdNumberValidator } from '../validators/IdNumberValidator';

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css'],
  providers:[IdNumberValidator]
})
export class CustomComponent implements OnInit {
  customForm: FormGroup;

  constructor(fb: FormBuilder, idNumberValidator : IdNumberValidator) { 
    this.customForm = fb.group({
      idFormControl: new FormControl(null,
          Validators.compose([
            Validators.required,
            Validators.minLength(3),
            Validators.maxLength(8),
          idNumberValidator.validate()
          ])
        ),
    })
  }
}

//IdNumberValidator.ts

import { Directive, OnInit } from '@angular/core';
import { Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[idValidator]'
})
export class IdNumberValidator implements OnInit {

  constructor() {

  }

  ngOnInit() {

  }

  validate(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value !== "Sachin") {
        return { "customError": { inValid: true, errMsg: 'Invalid Value' } };
      }
      return null;
    }
  }
}


//custom.component.html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <form [formGroup]="customForm">
      <input idValidator formControlName="idFormControl" />
      <div *ngIf="customForm.get('idFormControl').invalid && customForm.get('idFormControl').errors.customError.inValid"
        style="color:red">
        {{customForm.get('idFormControl').errors.customError.errMsg}}
      </div>
    
      <button type="submit">Submit</button>
    </form>

Fetching FormControl from Directive in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with identifying the standard property `form.invalid` in a template-based form during testing

The initial execution of the "ionViewDidEnter" method in Ionic 2 can be quite sluggish

Tips for personalizing Bootstrap 4 with angular-cli

Interpolating strings in a graphQL query

Executing HTTP requests within a loop using AngularJS 2

Using Typescript: ForOf Iteration with Unknown Value Types

Transferring data from a child component to a parent component in Angular using @ViewChild requires providing 2 arguments

Guide on displaying information on a pie chart in Angular 2 using ng2-charts

Is there a way for me to store the current router in a state for later use

What steps do I need to follow to write this function in TypeScript?

Unable to utilize external JavaScript files in Angular 8

Maximize the performance of displaying images

Troubleshooting problem with sorting in Angular 4 material header

Diverse Templates within a Single Angular Component

Issues with Webpack and TypeScript CommonsChunkPlugin functionality not functioning as expected

TypeScript conditional return type: effective for single condition but not for multiple conditions

Issue with Angular 6 and Html Webpack Plugin

Handling Errors in RXJS Angular - Utilizing .subscribe and Observable Strategy

What is the best way to implement a late-binding clone method in TypeScript classes?

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function