Is there a way to mark a template-driven form as invalid when a custom field validator fails in my Angular 15 application?

Question

Is there a way to mark a template-driven form as invalid when a custom field validator fails in my Angular 15 application?

Currently, I am working on an Angular 15 app that utilizes a hand-coded JSON file along with the JSON server for performing CRUD operations on a "employees" JSON data.

One of the tasks at hand involves adding custom validation to a <select> element.

Within the employee-form.component.html file:

<form class="modal-content" #employeeForm="ngForm" (ngSubmit)="addEmployee(employeeForm)">
    <!-- Modal Header -->
    <div class="modal-header py-2">
      <h4 class="modal-title">New employee</h4>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>

    <!-- Modal body -->
    <div class="modal-body py-2">
      <div *ngIf="isSuccess" class="text-center alert alert-success">
        Employee added successfully!
      </div>

      <div class="position-relative mb-1">
          <label class="form-label" for="firstName">First name</label>
          <input type="text" class="form-control" name="firstname" id="firstName" placeholder="First name" [(ngModel)]="firstname" #first_name="ngModel" required/>
          <div *ngIf="first_name.touched && first_name.errors?.['required']"  class="invalid-feedback">First name is required.</div>
      </div>

      ...
      (other form elements)
      ...

      <div class="position-relative mb-1">
        <label class="form-label" for="department">Department</label>
        <select class="form-select" name="department" id="department" [(ngModel)]="deptno" #emp_department="ngModel" required>
          <option value="-1">Pick a department</option>
          <option *ngFor="let department of departments" [value]="department.value">
            {{department.label}}
          </option>
        </select>
        <div *ngIf="emp_department.touched && emp_department.value == -1" class="invalid-feedback">You must pick a department</div>
      </div>

      ...
      (remaining form elements)
      ...

    </div>

    <!-- Modal footer -->
    <div class="modal-footer py-2">
      <button type="submit" class="btn btn-success" [disabled]="!employeeForm.valid">Add employee</button>
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
    </div>
</form>

Moreover, in the employee-form.component.ts file, there is a method named validateDepartment(form: NgForm), but it seems to be failing to validate correctly.

The main objective

The primary goal here is to ensure that a message saying "You must pick a department" appears over the select dropdown if no department is selected. Additionally, the form should remain invalid until a department is selected.

To address this issue, I have tried implementing the following solutions without success:

public validateDepartment(form: NgForm) {
   if (this.deptno == -1) {
    form.invalid;
   } 
}

public validateDepartment(form: NgForm) {
   if (this.deptno != -1) {
    form.valid;
   } 
}

You can check out a Stackblitz demo HERE.

Queries

Why does the form appear valid while the select element remains invalid?
What is the most effective way to resolve this issue?

javascript angular typescript

Answer 1

Answer №1

In a select element, the "required" attribute should be placed on an option with [ngValue]="null" or [ngValue]="undefined"

<select
  class="form-select"
  name="department"
  id="department"
  [(ngModel)]="deptno"
  #emp_department="ngModel"
  required
>
  <option [ngValue]="undefined" selected hidden>Pick a department</option>
  <option *ngFor="let department of departments" [ngValue]="department.value">
    {{department.label}}
  </option>
</select>

PLEASE NOTE: If any input inside the form is invalid, then the entire form will also be invalid.

Update: To implement a custom validator in Template-driven forms, you need to create a directive that implements Validator, as described in the documentation.

@Directive({
  selector: '[isNot]',
  providers: [{provide: NG_VALIDATORS, useExisting: NotValueValidatorDirective , multi: true}]
})
export class NotValueValidatorDirective implements Validator {
  @Input('isNot') value:any = null;

  validate(control: AbstractControl): ValidationErrors | null {
    if (control.value==this.value)
        return this.value?{error:"can be "+this.value}:{error:"can be null";}
    return null
  }
}

Usage example:

<select isNot="-1">
   <option value="-1" hidden>Choose one</option>
   ...
</select>

Update2:The app.module file would look like this:

import { NgModule } from '@angular/core';
...
import { NotValueValidatorDirective } from './components/employee-form/ifnot.directive'

@NgModule({
  imports: [ BrowserModule, FormsModule, HttpClientModule, AppRoutingModule ],
  declarations: [
    FilterPipe,
    ...
    NotValueValidatorDirective 
  ]

The employee-form.component:

<div class="position-relative mb-1">
            <label class="form-label" for="department">Department</label>
            <select class="form-select" name="department" id="department" [(ngModel)]="deptno" #emp_department="ngModel" isNot="0">
              <!-- Changed default option value to 0 -->
              <option value="0" hidden>Pick a department</option>
              <option *ngFor="let department of departments" [value]="department.value">
                {{department.label}}
              </option>
            </select>
            <div *ngIf="emp_department.touched && emp_department.invalid" class="invalid-feedback">You must pick a department</div>
          </div>

Note that the directive remains the same but without the "standalone:true" setting.

Answer 2

In a select element, the "required" attribute should be placed on an option with [ngValue]="null" or [ngValue]="undefined"

<select
  class="form-select"
  name="department"
  id="department"
  [(ngModel)]="deptno"
  #emp_department="ngModel"
  required
>
  <option [ngValue]="undefined" selected hidden>Pick a department</option>
  <option *ngFor="let department of departments" [ngValue]="department.value">
    {{department.label}}
  </option>
</select>

PLEASE NOTE: If any input inside the form is invalid, then the entire form will also be invalid.

Update: To implement a custom validator in Template-driven forms, you need to create a directive that implements Validator, as described in the documentation.

@Directive({
  selector: '[isNot]',
  providers: [{provide: NG_VALIDATORS, useExisting: NotValueValidatorDirective , multi: true}]
})
export class NotValueValidatorDirective implements Validator {
  @Input('isNot') value:any = null;

  validate(control: AbstractControl): ValidationErrors | null {
    if (control.value==this.value)
        return this.value?{error:"can be "+this.value}:{error:"can be null";}
    return null
  }
}

Usage example:

<select isNot="-1">
   <option value="-1" hidden>Choose one</option>
   ...
</select>

Update2:The app.module file would look like this:

import { NgModule } from '@angular/core';
...
import { NotValueValidatorDirective } from './components/employee-form/ifnot.directive'

@NgModule({
  imports: [ BrowserModule, FormsModule, HttpClientModule, AppRoutingModule ],
  declarations: [
    FilterPipe,
    ...
    NotValueValidatorDirective 
  ]

The employee-form.component:

<div class="position-relative mb-1">
            <label class="form-label" for="department">Department</label>
            <select class="form-select" name="department" id="department" [(ngModel)]="deptno" #emp_department="ngModel" isNot="0">
              <!-- Changed default option value to 0 -->
              <option value="0" hidden>Pick a department</option>
              <option *ngFor="let department of departments" [value]="department.value">
                {{department.label}}
              </option>
            </select>
            <div *ngIf="emp_department.touched && emp_department.invalid" class="invalid-feedback">You must pick a department</div>
          </div>

Note that the directive remains the same but without the "standalone:true" setting.

Answer 3

Answer №2

To set the default gender, you have a couple of options:

-- You can simply add "checked" in the HTML code like this:-

<input type="radio" class="form-check-input" name="gender" id="male" checked value="male" />

Alternatively, you can also specify it through a component like so:-

<label *ngFor="let radiobutton of radioItems">
  <input type="radio" name="options" (click)="model.option = radiobutton"
  [checked]="radiobutton === model.option">{{radiobutton}}
</label>

In the component-ts file, it would look something like this:-

export class AppComponent  {
  radioItems: Array<string>;
  model   = {option: 'Male'};

  constructor() {
    this.radioItems = ['Gender', 'Male', 'Female'];
  }
}

Answer 4

To set the default gender, you have a couple of options:

-- You can simply add "checked" in the HTML code like this:-

<input type="radio" class="form-check-input" name="gender" id="male" checked value="male" />

Alternatively, you can also specify it through a component like so:-

<label *ngFor="let radiobutton of radioItems">
  <input type="radio" name="options" (click)="model.option = radiobutton"
  [checked]="radiobutton === model.option">{{radiobutton}}
</label>

In the component-ts file, it would look something like this:-

export class AppComponent  {
  radioItems: Array<string>;
  model   = {option: 'Male'};

  constructor() {
    this.radioItems = ['Gender', 'Male', 'Female'];
  }
}

Is there a way to mark a template-driven form as invalid when a custom field validator fails in my Angular 15 application?

The main objective

Queries

Answer №1

Answer №2

Similar questions

Guide on running a MySQL query in an asynchronous function in a Node.js application

How can we refresh data obtained from a $http server call in AngularJS?

Testing the mongoose.connect callback method in Jest: A step-by-step guide

Create multiple instances of Object3D in THREE.js with various positions and rotations

Comparing Selenium and Watir for JavaScript Testing within a Rails environment

jqGrid: Efficiently edit a row inline by focusing on the specific cell clicked to enter edit mode

Generating dynamic divs in parallel

Making adjustments to regular expressions

"An unusual blend of TWEENJS and threejs creating a mesmerizing

AWS Lambda encountered an issue: Task terminated unexpectedly prior to finishing the operation

Is it possible for a memory leak to occur in node.js when using new Date()?

The configuration for CKEditor5's placeholder feature seems to be malfunctioning

"Experience the power of Vue.js 3.2 with Dynamic Component Knockout

Managing checkbox inputs within a MEAN stack application

What is the best way to extract items from another array that have approved IDs - is it through using map(), filter(),

What is the process for starting Nx serve for an application that has lint errors?

Is there a way for me to generate a preview thumbnail for my video?

What is preventing me from generating a string for transform:translate within Angular.js?

What's the reason behind the data not being retrieved by $.ajax?

Ignoring page redirects in Node.JS