Decoded Frontend
Decoded Frontend
  • 131
  • 2 575 629
Reactive Forms in Angular - Dynamic Validation
Learn Everything About Angular Forms 🚀
bit.ly/advanced-angular-forms_yt
In this video about Reactive Forms in Angular, I will show you how you can apply and remove validators to certain form controls dynamically, depending on the values from other form controls in your Angular Form. I will show you how to do that using ReactiveForms. You will see which pitfalls you might encounter while implementing this feature and, of course, I will show you how you can overcome them.
🕒 Time Codes:
00:00 - Intro
00:00:55 - Dynamic Validation in Action
00:11:27 - Promo: Advanced Angular Forms Course
00:12:53 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - DecodedFrontend
Instagram - decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
Переглядів: 5 643

Відео

Content Projection in Angular - Complete Guide (Beginners/Advanced)
Переглядів 10 тис.14 днів тому
👉 To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend You’ll also get 20% off an annual premium subscription. In this video, besides the basics of content projection in Angular, you will also learn more advanced scenarios like multi-slot content projection, Content Re-Projection, Projection aliasing, and ngProjectAs attribute, and last but n...
RxJS Scan Operator - How to Manage the State
Переглядів 8 тис.Місяць тому
Learn everything about Angular Forms 🚀 bit.ly/advanced-angular-forms-course-updated 👉 See All Angular Courses - bit.ly/discounted-course-bundle Have you ever had a use case when you had an RxJS data stream and wanted to shape some state from it? Watch this video until the end, and you will learn how you can create and manage the state right in the stream so that you can deliver data right to th...
Component Input Binding in Angular Router
Переглядів 8 тис.2 місяці тому
Learn everything about Angular Forms 🚀 bit.ly/advanced-angular-forms-course-updated 👉 See All Angular Courses - bit.ly/discounted-course-bundle 🕒 Time Codes: 00:00:00 - Intro; 00:01:19 - Routes handling in Angular; 00:02:14 - Idea behind Component Input Binding; 00:04:39 - Naming conflict resolution 00:05:44 - Real-life use case; 00:09:35 - Outro; 🔗 Source code from the tutorial: github.com/DMe...
Angular Model - The New Signal-Based 2-way Data Binding
Переглядів 19 тис.3 місяці тому
🔥 Conscious Angular Testing for Beginners with 10%-OFF (For the First 10 Students): bit.ly/conscious-angular-testing_U8YXaWwyd9k Recently, Angular 17.2 was introduced, which brings a new API that enables deeper integration of Signals into Angular components. One of these new functions is a function `model`, which enables the 2-way data binding and which one I am going to cover in this video. Yo...
Input Signals in Angular 17.1 - How To Use & Test
Переглядів 22 тис.4 місяці тому
Learn more about RxDB - bit.ly/rxdb 🚀 The introduction of Input Signals is another step towards the integration of Signals into Angular Framework Core. From this video, you will learn how to migrate your angular components to input signals smoothly and how to adjust your unit tests. Besides that, you will know how to make your inputs reactive even before Angular 17.1. If you find this video use...
Deferrable Views - New Feature in Angular 17
Переглядів 18 тис.4 місяці тому
Level up your Angular skills with my Advanced Courses 🚀 bit.ly/discounted-course-bundle Discover the easy way to load parts of your website only when needed with Angular 17's new feature: Deferrable Views. This video shows you how this cool tool helps to load your website faster and smoother, making your coding life simpler. Great for both new and experienced Angular users. Watch, learn, and sh...
Angular Testing - New Course & Giveaway Teaser 🎉
Переглядів 8 тис.7 місяців тому
Angular Testing - New Course & Giveaway Teaser 🎉
Angular 17 - New Build-In Control Flow Overview 🚀
Переглядів 36 тис.7 місяців тому
Angular 17 - New Build-In Control Flow Overview 🚀
Scraping Data from Amazon using Scraping Browser API, ExpressJS & Angular
Переглядів 3,8 тис.7 місяців тому
Scraping Data from Amazon using Scraping Browser API, ExpressJS & Angular
The Role of "exportAs" Property in Angular [RE-UPLOADED]
Переглядів 12 тис.8 місяців тому
The Role of "exportAs" Property in Angular [RE-UPLOADED]
How to Make Forms in Angular REUSABLE (Advanced, 2023)
Переглядів 57 тис.8 місяців тому
How to Make Forms in Angular REUSABLE (Advanced, 2023)
Web Workers in Action - Performance Boost for Web Applications (2023)
Переглядів 23 тис.9 місяців тому
Web Workers in Action - Performance Boost for Web Applications (2023)
How To Make Angular Code More Reusable
Переглядів 27 тис.10 місяців тому
How To Make Angular Code More Reusable
Angular NgRx - How to use Feature Creator (API Overview, 2023)
Переглядів 16 тис.11 місяців тому
Angular NgRx - How to use Feature Creator (API Overview, 2023)
Reset Forms in Angular using Reactive Forms
Переглядів 11 тис.11 місяців тому
Reset Forms in Angular using Reactive Forms
Pitfalls Of Using takeUntil and takeUntilDestroyed RxJS Operators
Переглядів 19 тис.Рік тому
Pitfalls Of Using takeUntil and takeUntilDestroyed RxJS Operators
The new DestroyRef Provider in Angular 16 (2023)
Переглядів 12 тис.Рік тому
The new DestroyRef Provider in Angular 16 (2023)
Change Detection in Angular Pt.3 - OnPush Change Detection Strategy
Переглядів 24 тис.Рік тому
Change Detection in Angular Pt.3 - OnPush Change Detection Strategy
Change Detection in Angular Pt.2 - The Role of ZoneJS (2023)
Переглядів 19 тис.Рік тому
Change Detection in Angular Pt.2 - The Role of ZoneJS (2023)
Change Detection in Angular - Pt.1 View Checking
Переглядів 33 тис.Рік тому
Change Detection in Angular - Pt.1 View Checking
First look at Signals in Angular
Переглядів 44 тис.Рік тому
First look at Signals in Angular
Design Patterns in Angular Source Code - Strategy Design Pattern
Переглядів 16 тис.Рік тому
Design Patterns in Angular Source Code - Strategy Design Pattern
Design Patterns in Angular Source Code - Bridge Design Pattern
Переглядів 24 тис.Рік тому
Design Patterns in Angular Source Code - Bridge Design Pattern
Component-Less and Empty-Path Routes in Angular (2023)
Переглядів 13 тис.Рік тому
Component-Less and Empty-Path Routes in Angular (2023)
Demystifying Angular Two Way Binding (2023)
Переглядів 12 тис.Рік тому
Demystifying Angular Two Way Binding (2023)
NgTemplateOutlet in Angular - Everything You Have to Know (2022)
Переглядів 46 тис.Рік тому
NgTemplateOutlet in Angular - Everything You Have to Know (2022)
Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)
Переглядів 9 тис.Рік тому
Angular Builders - Creating Custom Builder from Scratch (Advanced, 2022)
Angular Builders - How Do They Work? (2022)
Переглядів 7 тис.Рік тому
Angular Builders - How Do They Work? (2022)
Advanced Angular Forms - Free Mini-Course (Template-Driven)
Переглядів 24 тис.Рік тому
Advanced Angular Forms - Free Mini-Course (Template-Driven)

КОМЕНТАРІ

  • @SergeyLevandovski
    @SergeyLevandovski День тому

    Promise = grab bucket and get water from well )

  • @paimfp
    @paimfp 2 дні тому

    Would be great to have an update on how this works in zoneless application, specially the async global error handler that uses zones as you showed.

  • @nedafayazi
    @nedafayazi 2 дні тому

    I wish I could like your Angular Form course million times. Thank you very much for your generusity in teaching complex issues in a very simple way.

  • @franciscofdez8334
    @franciscofdez8334 3 дні тому

    Great job. You resolved my doubts about this topic!. It would be really great if you combine portals with content projection. For instance: single main toolbar that render different action buttons depending on the "page" component you've been routed to (every page has its own buttons which will be projected to the main toolbar). PS: using cdkPortalOutlet or so.

  • @tomekczajka5165
    @tomekczajka5165 4 дні тому

    Not a single word about testing. I think it is crucial. It is 2024 and I still prefer constructor injection

  • @user-tv9ol8ne3k
    @user-tv9ol8ne3k 4 дні тому

    Thanks, Dmytro. As usual, your explanation is amazing!

  • @tz2014
    @tz2014 4 дні тому

    Just one word, legend

  • @uidhtml
    @uidhtml 5 днів тому

    Awesome video.. 👌👌

  • @Zx-jp7cn
    @Zx-jp7cn 5 днів тому

    such a cool hoodie, could someone let me know where i can buy it?

  • @vim2741
    @vim2741 5 днів тому

    upload the course in udemy pls

  • @Nabulio85
    @Nabulio85 5 днів тому

    Thank you Dmytro. Great content. I have a question about your course. Are you updating its content with the features of the latest versions of Angular? (17 and 18 for example)

  • @dylanjhalltech8313
    @dylanjhalltech8313 5 днів тому

    Thanks for the well thought out material. I think that a clear understanding of content projection is essential for making dynamic reusable components.

  • @rockenOne
    @rockenOne 5 днів тому

    Use toSignal instead

  • @DemystifyFrontend
    @DemystifyFrontend 6 днів тому

    You are an awesome guy, love your videos ❤️

  • @macs0212
    @macs0212 6 днів тому

    Instead of using markAsDirty() you could use markAsTouch()... Am i right?

  • @nelson3391
    @nelson3391 7 днів тому

    Great video. Thanks a lot!

  • @uidhtml
    @uidhtml 7 днів тому

    Hello Dmytro, you are a champ, but need one help from your side, can you explain how to set a custom theme in detail with angular material v18. Please because things have changed too much.

  • @ugochukwuumerie6378
    @ugochukwuumerie6378 7 днів тому

    Useful video

  • @Aliakbaresmaeiliiii
    @Aliakbaresmaeiliiii 7 днів тому

    there is no word to say for this good video❤💙

  • @tomekczajka5165
    @tomekczajka5165 7 днів тому

    Important, always missed by juniors, trackBy function

  • @vasiliykrush2150
    @vasiliykrush2150 8 днів тому

    For some reason I had expected something better written than what I saw in the video. Like some util. But any case, thanks

  • @AshikPatel-ir2uo
    @AshikPatel-ir2uo 8 днів тому

    Hello i encountering one issue in @defer view when i am pass @defer(on viewport) {} it's says following error "viewport" trigger with no parameters can only be placed on an @defer that has a @placeholder blockngtsc(-995002) i force fully need to add @placeholder to get rid of that error. can you please explained why this error is getting and for what reason ? thank you so much for your amazing angular content @decodedFronted

  • @DrCuttler
    @DrCuttler 8 днів тому

    Very cool! I actually did the same thing recently, but did it slightly differently: a) I added the Validator to the field permanently but enabled and disabled them instead of added and remove them b) I transferred the valueChanges observable into a signal and used angular effects for switching. BTW: I really enjoy your channel! You made me a better angular developer! :)

  • @devxbasit
    @devxbasit 8 днів тому

    Insightful

  • @thanhtuanle7186
    @thanhtuanle7186 8 днів тому

    hey, thanks for your wonderful forms course. How can i get the source code of this video to reference?

  • @robertaliaj4908
    @robertaliaj4908 9 днів тому

    Thank you very much for this amazing informative video, it helped me a lot understading the concept of how error handling in Angular works.

  • @2347matte
    @2347matte 9 днів тому

    You're awesome.

  • @tarquin161234
    @tarquin161234 9 днів тому

    I'm confused by the assignment to this.skills$. I can't fully see what is being done here as the rest of the file is not shown, but why are you using tap here rather than map? If I'm not mistaken, tap will not return anything, so this.skills$ will never emit anything. I also can't see where the subscriptions to this.skills$ are.

    • @DecodedFrontend
      @DecodedFrontend 9 днів тому

      Hi, thanks for the question. In the context of exactly this lesson, this.skills doesn't play any role. However, to answer your question, I use the tap operator because the code inside performs side effects (new FormControls are registered), and the tap operator is exactly the place where side effects have to happen. The map operator should be a pure function that simply transforms data from A -> B, but that was not the case there.

    • @tarquin161234
      @tarquin161234 9 днів тому

      @@DecodedFrontend It's just weird seeing tap with no other operators in the pipe. I was curious to see it's uses. Good video anyway

    • @DecodedFrontend
      @DecodedFrontend 9 днів тому

      @@tarquin161234 well, the alternative would be to put logic from tap to the subscribe() callback but from the functional point of view it should be the same and it is mostly a matter of taste. I even saw the thread about this topic on Twitter and opinions were split pretty much equally :)

    • @tarquin161234
      @tarquin161234 9 днів тому

      @@DecodedFrontend sure. But from my pov it's confusing because you can't see any subscriptions so looks like the tap will never execute

    • @DecodedFrontend
      @DecodedFrontend 9 днів тому

      Ah, ok. Now I see what confuses you. Actually, the subscription to this.skills$ happens via the async pipe in the template. This will trigger an HTTP call inside the getSkills() method, and once data arrives, it goes to the tap operator where, based on returned data, I create corresponding FormControls and add them to the form (calling buildSkillControls()). Because buildSkillControls() performs side effects, I placed it in the tap operator because, in my case (since I subscribe via async pipe), the tap operator is the only place where I could handle side effects. I hope now it is clearer :) It might look strange because you don't know the context of the course and what was done before :)

  • @Ivanco_step
    @Ivanco_step 9 днів тому

    cool 😎

  • @RahafHaj
    @RahafHaj 9 днів тому

    I think using cross validation is better when control validation is related to other control values within the form, where we can get the year value from form.value.year and check it conditionally every time conditionalPassportRequired(control: AbstractControl) { const {year, passport} = form.value; if(year > x && !passport) { return {passportRequired: true} } return null }

    • @DecodedFrontend
      @DecodedFrontend 9 днів тому

      Hi, Thanks for your suggestion. As always, in web development, things might be done in many different ways, and each solution has its own pros and cons. Let’s see if the cross-validation at the root FormGroup is indeed a better solution: The cross-validator on the root level of the form will invalidate the root FormGroup and not a particular control (passport). This will lead to multiple problems: 1. Inconsistent error checking. The error object returned by the validator will be added to the root FormGroup.errors. This means that in order to check the passport field against the ‘required’ error, you would need to do it in the root FormGroup like this.form.hasError('passportRequired’). To me, it is quite confusing and not obvious because the error object should “live” in the control it belongs to and not in the root FormGroup. 2. Inconsistent control validity state. From an Angular point of view, your passport control will remain valid. This means that it will get the ng-valid CSS class. In this case, you might encounter a situation where your field got a green border (indicating a valid state), but below will be displayed an error message that the field is required. This is quite confusing UX. 3. Scaling. At first glance, this solution wouldn’t scale well. In an actual application, you usually have an object/map like “validatorKey -> Error Message” to keep validation messages consistent across the whole application. Because you introduce a new error key “passportRequired”, you would need to add this key also to the error message map, and the message for this new key should most probably be the same as the message for the regular ‘required’. So if later you would need to change the error message for the “required” validator, you have to update it also for “passportRequired”. And here, we are talking only about the passwordRequired case, but in reality, you might have other dynamic validators, which will make error message management quite challenging. 4. Performance impact. Most probably, if the validator logic is lightweight and the form is small, you won’t see a real performance impact; however, it is definitely worth mentioning that the validator in the root FormGroup will be triggered every time when any FormControl value changes in the form. It makes no sense to do that because we are interested only in changes from the yearOfbirth control. Those are the first thoughts that came to my mind this late night :)

    • @RahafHaj
      @RahafHaj 8 днів тому

      That's was great deceleration, thanks 👍

  • @andreiarpenti2589
    @andreiarpenti2589 9 днів тому

    If user selects 10 times an adult date, won't be the validator added 10 times? Or angluar sees that the object is already there, and won't add it many times?

    • @DecodedFrontend
      @DecodedFrontend 9 днів тому

      Good question. This is what says the comment in the src code about that: “Adding a validator that already exists will have no effect” - github.com/angular/angular/blob/101edda0184b458d331163b7e04280c3b8b48bfc/packages/forms/src/model/abstract_model.ts#L788

  • @anhquande
    @anhquande 9 днів тому

    "scan" operator can be considered as a reactive version of "reduce()" function

  • @madeOfClay99
    @madeOfClay99 10 днів тому

    Top quality content! Any plans for making a course all about signals with Angular? Thank you for the video Dmytro

  • @qdp684
    @qdp684 10 днів тому

    Why not just create a validator for a form?

  • @dat.nguyenquoc
    @dat.nguyenquoc 10 днів тому

    Thank you very much!!!!

  • @GamerOfBharat
    @GamerOfBharat 10 днів тому

    If we do updateValueAndValidity() isn’t it just call the valueChanges() again and again

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      Thanks for the question. Yes, updateValueAndValidity() will trigger the valueChanges and statusChanges events. Whether it is a desired behavior or not depends on your particular use case. Nevertheless, if you don't want those events to be emitted, you can call it like this: updateValueAndValidity({ emitEvent: false })

  • @ferhado
    @ferhado 10 днів тому

    Dmytro, could you please make a video about Angular Material theming for v18? The documentation is confusing.

  • @ferhado
    @ferhado 10 днів тому

    I have subscribed to the Angular Forms course. No words, it's just amazing. I highly recommend it to everyone who wants to reach an advanced level in Angular Forms.

  • @syimykamatov8955
    @syimykamatov8955 10 днів тому

    Helpfull video

  • @arwaromdhane6732
    @arwaromdhane6732 10 днів тому

    I want to thank you for your gold videos you helped me a lot ❤❤❤❤❤❤❤❤

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      I'm so glad to hear that! Thank you for the comment :)

  • @koempf
    @koempf 10 днів тому

    I subscribed to this course also last year :-) great course absolutely :-) would be cool if you could update it to Angular 17/18 features :-) especially Signals :-)

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      Once the signals will be adopted by Angular Forms, I will definitely to the update :)

  • @jeffnikelson5824
    @jeffnikelson5824 10 днів тому

    Why not use new features like the new control-flow or the takeUntilDestroyed operator

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      Because at the moment when this video was recording, those features were not released :)

  • @pavlokozachuk555
    @pavlokozachuk555 10 днів тому

    Once the yearOfBirth control is defined with an initial value, it makes sense to add a required validator to the passport control when it's defined, and not by using the startsWith operator. Слава Україні!

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      Героям слава 🇺🇦 Yes, it could be an option as well 👍

  • @DecodedFrontend
    @DecodedFrontend 10 днів тому

    Learn Everything About Angular Forms 🚀 bit.ly/advanced-angular-forms_yt

  • @rembautimes8808
    @rembautimes8808 10 днів тому

    The angular forms course is gold quality. I subscribed last year and helped me a lot in my development

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      I am so happy to hear that! Thank you for sharing your experience! P.s. I swear the comment wasn't a paid ad 😅

  • @cwnhaernjqw
    @cwnhaernjqw 10 днів тому

    Hi Dmytro nice video. Question: do we also have to unsubscribe onDestroy when subscribing to a form control, or angular takes care of that? Thanks

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      Hi :) Thank you! Honestly, I don't remember that the control models have any mechanism of auto-unsubscription, so I would definitely unsubscribe explicitly. I personally follow the rule - Unsubscribe-Always ;)

  • @MateusBellomo-ml4zm
    @MateusBellomo-ml4zm 10 днів тому

    I was time travelling here, nice video.

  • @enverusta7811
    @enverusta7811 10 днів тому

    Thanks a lot, love your content. Which tools are u using for video content creations?

    • @DecodedFrontend
      @DecodedFrontend 10 днів тому

      Thank you :) exactly this one was created with a stack: OBS Studio + Adobe Premier Pro.

  • @MrVinodkumar92
    @MrVinodkumar92 10 днів тому

    Thanks for the clear explanation. I have a doubt. U said placeholders, loading error are eagerly loaded. But in projects we use again another component inside the error and loading blocks Then we lose the lazy loading right. So how can we achieve even loading the blocks content as lazy loaded.

  • @tryhuma
    @tryhuma 11 днів тому

    You could consider making a course about angular cdk. thanks for video!