A simple guide to adding and removing dynamic validations in Angular reactive forms

The Angular logo with the words “validating Reactive forms” and 3 bars, two with checkmarks and 1 with an X
The Angular logo with the words “validating Reactive forms” and 3 bars, two with checkmarks and 1 with an X
Image credit: Author

If you’re developing an Angular application, you might face a situation where you have to add or remove some validators dynamically in form controls. For example, let’s suppose you have a County field in your reactive form and you want to make it required based on the country selected by the user. For this, you might think of adding and removing the Required validator from the County field based on the country selected.

Well, for this kind of scenario, Angular helps us a lot. We have some built-in functions in Angular which we can use to set validators conditionally — and thanks to reactive forms, which allows us to do so very, very easily. …


Get started using Proxy in your JavaScript code today

Image for post
Image for post
Uploaded by Oskar Yildiz on Unsplash

First things first: The official definition of Proxy from MDN is:

“The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.”

Now, before going in to dig deeper, let’s first discuss some real-life examples so that at the end, we can have better clarity about Proxy. This is how bitfish explained it in his article.

As human beings, we have a lot of things to do in our day-to-day life, such as reading emails, receiving a delivery, etc. Sometimes, we may feel a little anxious because of a lot of extra and unnecessary tasks — like there are a lot of spam emails and it takes some effort and time to get rid of them, or the delivery received may contain bombs planted by terrorists, threatening our security (just a possibility). …


Image for post
Image for post

on June 24, 2020, Angular team announced that Angular 10 is available and ready for community to use. It’s not that long when Angular 9 was released in Feb 2020. Angular team just took around 4 months to release the next update i.e. Angular v10. Just a smaller release typically.

It’s a major release from Angular team in certain ways, that spans the entire platform, including the framework, Angular Material, and the CLI. This release from Angular Core Team puts more emphasis on quality, tool, and ecosystem improvements than new features.

Angular team at Google is committed to release two major versions each year to keep Angular synchronized with the rest of the JavaScript ecosystem and to have a predictable schedule — one of the reason to love Angular. …


Image for post
Image for post

IMPORTANT: Please read the updated article here.

If you’re developing an Angular Application, you might face a situation where you have to Add or Remove some validators dynamically in Form Controls. For e.g. let’s suppose you have a “County” field in your Reactive Form and you want to make it Required based on the country selected by the user. For this, you might think of adding and removing required validator from “County” field based on the country selected.

Well, for these kind of scenarios, Angular helps us a lot. We have some build in functions in Angular which we can use to Set Validators conditionally. …


Image for post
Image for post

Note: Please read the updated article here.

When it comes to Integrate YouTube IFrame Player API with Component based Frameworks like Angular, it becomes little Difficult and Tricky. Here, we are going to see how we can implement this. I’ll try to discuss all the problems and challenges which I faced while Integrating YouTube Player API in my Angular Application.

First let’s just create a dummy Angular App. If you already have a running application, just skip this step.


A simple guide to add a YouTube IFrame Player in an Angular application

A screenshot of youtube.com
A screenshot of youtube.com
Photo by Szabo Victor on Unsplash

When it comes to integrating the YouTube IFrame Player API with component-based frameworks like Angular, it’s a bit difficult and tricky. Here, we’re going to see how we can implement this. I’ll try to discuss all of the problems and challenges I faced while integrating the YouTube IFrame Player API into my Angular application.

First, let’s just create a dummy Angular app using the following command. If you already have a running application, just skip this step.

ng new YTIFrameAPI-with-Angular

Once the app is ready, create a div with id="player" (or whatever you want) in your template file, like this:

About

Gourav Kajal

Just a regular front end developer who likes Angular a lot

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store