Tips for implementing Conditional validation in form models in anugular2

I need to determine whether the required validator for Address should be applied based on the value of this.type being 2.

Below is the code snippet I am using for form validation:


buildForm() {
     this.orgForm = this.fb.group({
     Name: [this.addUpdateModel.Name,  [Validators.required]],
     Id: ['', [Validators.pattern(this.constant.positiveIntegers), Validators.maxLength(6)]],
     Address: [this.addUpdateModel.Address,  [(this.type === 2) ? '' : Validators.required]],
     });

    this.orgForm.valueChanges.subscribe(data => this.onValueChanged(data));
    this.onValueChanged(); // (re)set validation messages now
}

Any thoughts or suggestions?

angulartypescript

Answer №1

To update validators in a reactive form and reset them, you can utilize the setValidators() method. In this scenario, the code will look something like the following:

** If this.type equals 2, then set the validator to null **

if(this.type==2){
    this.orgForm.controls.Address.setValidators(null);
    this.orgForm.get('Address').updateValueAndValidity();
}
else{
    this.orgForm.controls.Address.setValidators([Validators.required]);
    this.orgForm.get('Address').updateValueAndValidity();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty with Angular's Interpolation and incorporating elements

I've encountered an issue with String Interpolation while following an Angular course. In my server.component.ts file, I've implemented the same code as shown by the teacher in the course: import { Component } from "@angular/core"; @Component ( ...

javascriptangularangularjstypescript

Angular2: Issue with service injection within service

Below is the code snippet I have written. Assuming you can grasp the purpose without further elaboration. @Injectable() export class Dispatcher { } @Injectable() export class TodoStore { constructor(@Inject(Dispatcher) private dispatcher:Dispatcher ...

angularservicedependency-injection

Angular 2 Release Candidate 5 has encountered an issue in platform-browser.umd.js. The error message states: "An error has occurred that was

I am currently utilizing a service to send a request. homepage.service.ts import { Injectable } from "@angular/core"; import { Http, Response } from "@angular/http"; import { Observable } from "rxjs/Observable"; import { PATH } from "../const/config"; ...

angularangular-rc5

When running ng new command, an error may occur with dryRunSink.(...).concat not functioning properly

I've been attempting to create a new Angular project by following the steps outlined on this website: https://github.com/angular/angular-cli However, each time I try to initiate a new project using the ng new command, an error occurs. E:\Code&b ...

angularangular-cli

Is it possible for recursive type definitions to handle generics effectively?

I have identified what I believe to be a bug in Typescript and have submitted it as an issue here. Considering that this might not get resolved quickly, I am reaching out for suggestions. Does anyone know of a better solution or workaround than the one pro ...

typescriptgenericsrecursiontypespartial

Tips on preventing pooling in Angular 5

service.ts: // Fetch all AgentLog logs using pooling method getAgentLogStream(): Promise<string> { const url = `${this.testCaseUrl}/logfile`; return Observable .interval(5000) .flatMap((i)=> this.http.get(url).toPromise().then(respons ...

typescriptobservableangular2-formsangular-promiseangular5

The typescript-eslint-parser does not officially support this version of TypeScript

I recently acquired an outdated AngularJs application that still relies on the legacy tools: bower and grunt. Upon executing grunt serve --reload, I encounter the following warning message: WARNING: You are currently running a version of TypeScript which ...

typescriptgruntjseslint

The timezone plugin in day.js may sometimes generate an incorrect date

For a while, I've been using dayjs in my angular project to convert timestamps from UTC to localtime. However, after my recent update, this functionality stopped working. This isn't the first issue I've encountered with dayjs, so I decided t ...

angulartypescriptdayjs

Struggling to grasp the error: "NDEFReader is not defined" in a Vue3 web application

In the process of developing a vue3 application, I am integrating the NFC Web API to facilitate reading and writing NFC Chips. My project utilizes typescript, vue routing, and pinia for smooth functionality. Everything runs smoothly when the application i ...

typescripterror-handlingvuejs3runtime-errornfc

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

In my react-ts project, I define the following redux action type: type DataItem = { id: string country: string population: number } type DataAction = { type: string, payload?: DataItem } I included an optional payload property because there are tim ...

reactjstypescriptredux

Presentation of information with loading and error scenarios

How can we effectively display data in an Angular view, considering loading state and error handling? Imagine we are fetching a set of documents from our backend and need to present them in an Angular view. We want to address three possible scenarios by p ...

angulartypescript

Validators in Angular forms are a powerful tool for enforcing

Is it possible to use Validators in the ts.file to display an error message when a field is invalid, rather than directly in the html? Thanks. html <form [formGroup]="form"> <mat-form-field> <mat-label>Nom</mat-label> ...

angulartypescript

Tips for navigating to a specific row within a designated page using the Angular Material table

Utilizing angular material, I have set up a table with pagination for displaying data. When a user clicks on a row, they are redirected to another page. To return to the table page, they must click on a button. The issue arises when the user needs to retu ...

javascriptangulartypescriptangular-material

Encountering a value accessor error when attempting to test a simple form in Angular 4 and Ionic 3

My ionic form is quite simple: <ion-header> <ion-navbar> <ion-title>Foo</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form [formGroup]="fooForm"> <ion-item> ...

javascriptangularionic2

Input box in Angular matDatepicker fails when typing due to locale settings

When using a datepicker like this: <mat-form-field> <input matInput [matDatepicker]="picker" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker> ...

angularangular-materiallocaleangular-material-datetimepicker

Struggling to destructure props when using getStaticProps in NextJS?

I have been working on an app using Next JS and typescript. My goal is to fetch data from an api using getStaticProps, and then destructure the returned props. Unfortunately, I am facing some issues with de-structuring the props. Below is my getStaticProp ...

javascripttypescriptnext.js

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

This piece of code showcases the issue: let someVar: number; const someFunc = async () => { someVar = 1; } await someFunc(); if (someVar == 1) { console.log('It is 1'); } As a result, you will encounter ...

javascripttypescript

Executing Angular async routing functions outside of the ngZone allows for more efficient

The routing function was called within a service and I am encountering the following warning message: Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'? However, I cannot simply call this.ngZone.run(...) because I ...

angularrxjs

A comparison of parent and child components

To implement a child-parent component relationship in Angular, first create two JSON files: parent.json and child.json. The parent.json file should contain the following data: "Id":10001, "name":"John" "Id":10002, ...

javascriptjsonangular

What are some ways to resolve this console error: "TS2307: Could not locate module '@components/common/ButtonBlock' or its corresponding type declarations."

While the project is running smoothly, I am noticing a multitude of errors appearing in the console of VS Code. How can I eliminate these error messages? It seems to be related to TypeScript. Additionally, I am encountering an error in the browser as well ...

reactjstypescript