Building Forms in Angular Apps | Mosh

Share
Embed
  • Published on May 20, 2022

Comments • 206

  • Sahil Bawa
    Sahil Bawa 7 months ago +3

    As a newbie to Angular, I tried watching multiple videos on Reactive vs Template-driven forms. This was the only video whose explanation and use of graphics finally made it click in my head. Thank you Mosh! Don't know why I even bothered looking elsewhere for learning Angular Forms.

  • Buba Manjang
    Buba Manjang 4 years ago +15

    Your efforts in making these amazing videos is highly appreciated. Thank you so much!

  • Soundariya B
    Soundariya B 2 years ago +2

    Amazing and very helpful video, as I am a beginner in angular so this video is very helpful to clear basic things related to angular form and controls.
    Thank you Mosh for this video and please try to make some more videos on angular basics especially for beginners.

  • ssains
    ssains 4 years ago +1

    I can never thank you enough you have restored my faith in humanity Love you man. Please keep making these awesome videos with the amazing explanation of theory and the code along solutions thanks again

  • Danish Chief
    Danish Chief 2 years ago +26

    From anyone who gets an error "There is no directive with "exportAs" set to "ngModel"" you should:
    import { FormsModule, ReactiveFormsModule } from "@angular/forms";
    @NgModule({
    imports: [
    BrowserModule,
    FormsModule, //

    • Shreyas Sapre
      Shreyas Sapre 2 years ago

      @Hafsa dolly happy coding.

    • Hafsa dolly
      Hafsa dolly 2 years ago +1

      @Shreyas Sapre tq now it solved!!

    • Shreyas Sapre
      Shreyas Sapre 2 years ago

      @Hafsa dolly app.module.ts

    • Hafsa dolly
      Hafsa dolly 2 years ago

      Where we should do this?

    • elad baruch
      elad baruch 2 years ago

      i love your face so much and i dont know even how you look like

  • Anand Muley
    Anand Muley 2 years ago +2

    I like the part and the thought process behind code formatting. You should always treat the code as an art too and not only science👍

  • Elene Gulordava
    Elene Gulordava 4 years ago

    Thank for your detailed, great explanations, it's an amazing work!

  • Jamaluddin Mondal
    Jamaluddin Mondal 3 years ago +2

    Thanks for giving a clean explanation ,👌
    You may use Prettier extension on Vs Code automatically every property will be shown line by line

  • linoleparquet
    linoleparquet 2 years ago

    Clear and concises explainations make the subjet so much easier to understand
    Thank you so much!

  • Rajesh Birelly
    Rajesh Birelly 3 years ago +1

    Thank you Mosh. Your videos are amazing and very easy to understand the concepts.

  • Somesh Nukala
    Somesh Nukala Year ago

    One of the greatest Technical Teachers in the world. Mosh sir! Thank you so much sir. Hats off

  • Yogesh Kumar
    Yogesh Kumar 4 years ago +1

    that's wonderful and so easy to understand. Thanks a lot Mosh :)

  • Nour Lababidi
    Nour Lababidi 3 years ago +2

    Thank you very much. The speed is perfect and the instructions are clear . One of the best. Thank you!

  • Julio Blancas
    Julio Blancas 4 years ago +4

    Thank you for sharing your time and knowledge with the people loves learn. Congratulations!.

  • san mani
    san mani 4 years ago +25

    Thank you Brother. This video helped me to learn the angular form very easily. God Bless You.

  • Graziele Silva
    Graziele Silva 3 years ago +1

    Thank you for share some knowledge and spend some time doing that kind of content for the community! Bless you.

  • Aswini Nayak
    Aswini Nayak 3 years ago +1

    Awesome 👏 I am struggling to set the default values for a multi select drop down. Mat select. Could you please share 1 example

  • Ryan Connolly
    Ryan Connolly 3 years ago +3

    You are my hero - coming from an HTML PHP environment this is helping me out so much!!! THANK YOU!

  • Jasmine M
    Jasmine M 2 years ago +1

    you are really good at explaining ! help me a lot!

  • Khizer
    Khizer 3 years ago +1

    Excellent 🔥🔥 Thank you for this tutorial .

  • Rahul Mathew
    Rahul Mathew 3 years ago

    U can do mvvm in angular you dont need reactive form and other crap. You decide your architecture the framework should not decide for you. And unlike react , you don't need to write html inside javascript. So there is clear separation of concern. View is not responsible for checking business logic , its business model job to do that and let the view know about how to present the data via viewmodel. Just create a viemodel and bind that to the view. Do data transformation logic and data validation inside a business model. Inject the business model to view model via the constructor. inject the dataservice api layer to model via constructor. If you need to call component B from component A, just expose an interface and let A create a viewmodel by inheriting from that interface and pass an instance of that viewmodel as a property binding to B. Thats it. Angular clearly simplifies the architecture and lets your write decoupled manageable application. Period.

  • Davood Dehghan
    Davood Dehghan 4 years ago +1

    Thank You man
    great tutorial
    it's an amazing work!

  • Роман Костюк

    Good lesson for beginers... thanks!

  • Sushil Sharma
    Sushil Sharma 4 years ago

    Such a nice video helping to easily create an angular form

  • Breaking Code
    Breaking Code 4 years ago +1

    Thanks so much for making this video.. Honestly it was such a good help. I'll link you when I'm done with the site I'm working on :D

  • tony nguyen
    tony nguyen 3 years ago +2

    would you ever consider updating your courses for Angular 7?

  • Eray Tonyali
    Eray Tonyali 4 years ago

    Thanks for your amazing tutorial!

  • Thobishi Moreko
    Thobishi Moreko 11 months ago +1

    The besting about your teaching is that you advise on the use case scenarios…. That is a great way to learn…. Thanks

  • ledspbr
    ledspbr 3 years ago +10

    Puts... Este cara é muito bom
    This guy is greeeat teacher

  • Jagadeesh Kalugotla
    Jagadeesh Kalugotla 2 years ago

    Actually i was struggled a lot for form validating but trust me this is the one of the best tutorial ----->Jagadeesh

  • G R
    G R 4 years ago +1

    Great video!
    But how do you clean all the alerts after you 'unFoucused'?
    and how to add a confirm submission massage?

  • Daniel Aregawi
    Daniel Aregawi 3 years ago +1

    Thank you so for sharing this video!! What's the editor you we're working on?? I love how it simply generates the markup can you please share how I can use it too?

  • Abderazzak Mnai Moutaanni

    Hello,
    Thanks for the awesome video,
    I just want to add that on Angular10, the firstName.errors object can be NULL, so you need to use the safe navigation operator ?
    *ngIf="firstName.errors?.required"
    regards

    • Aviral Goel
      Aviral Goel Month ago

      And now in 2022 use
      *ngIf="firstName.errors?.['required']"

  • Purshotham AM
    Purshotham AM 3 years ago +1

    Seriously your tutorial was very helpful for me. But you didn't mention about submit button validation. Can you help me with that?

  • Blacklabel mee
    Blacklabel mee 4 years ago +1

    Well explained. thanks a lot Mosh!!

  • Santosh Singh
    Santosh Singh 3 years ago +1

    Many Thanks for such an awesome videos. Thanks a Ton Sir!!!!

  • Sample1
    Sample1 4 months ago

    Thank you mosh !
    This video explained me easier !

  • Malik Adebayo
    Malik Adebayo 2 years ago +1

    Hello Mosh, thanks for the video, however adding the ngModel reference directive '#firstName= "ngModel"' for the input validation is not working rather taking everything off the page and leaving it blank and if i remove it, the page will show the form again. i've troubleshoot it to no avail
    do you know what might be the problem pls

    • Esteban Sepulveda
      Esteban Sepulveda Year ago +1

      @Sidhanth Prabhu Desai Thanks man, this saved my life! you rock!

    • Sidhanth Prabhu Desai
      Sidhanth Prabhu Desai Year ago

      @Srujith Rao Ambati okay
      in your forms component TS. file
      you imported (formvalidators, and form control??

  • Brian Small
    Brian Small 2 years ago +1

    Excellent instruction.

  • Naresh Goud
    Naresh Goud 3 years ago

    Great video Mr.Mosh. thank you very much

  • Krzysztof Ryszawy
    Krzysztof Ryszawy 3 years ago +1

    Great tutorial, thanks.

  • Marcus Vinicius
    Marcus Vinicius Year ago +1

    MUITO BOM

  • Manjunath Rajure
    Manjunath Rajure 3 years ago

    This helped a lot to understand angular forms in simpler way.

  • R N
    R N 3 years ago +1

    You are the best👍. It helped me a lot.. Thank u..

  • Kaushik Das
    Kaushik Das 11 months ago

    Thanks for the tutorial Object is possibly 'null'. -> did anyone getting this error.after adding individual validations.

  • BarkingFrog
    BarkingFrog 3 years ago

    How do I create a "username taken" check? What is the best way? I want the validation to appear when the user is typing

  • Mahil Kr
    Mahil Kr 2 years ago

    Very nice, great presentation.

  • SzigSag
    SzigSag 3 years ago +3

    Hy there,...
    i was wondering why im getting the ERROR TypeError: Cannot read property 'required' of null! Been already on stackoverflow and the angular docs but no solution could help me get rid of that problem! You guys have any solutions for me? ;)
    btw... visual studio gives me that error message aswell: Identifier 'required' is not defined. '__type' does not contain such a member

    • Prayag Parikh
      Prayag Parikh Year ago

      It's showing same error for me. What's the solution?

  • Arunkumar S
    Arunkumar S 2 years ago

    Sir, I try to bought a course through the link in a description but it shows your account is missing payment method. Some told, if the seller wouldn't accept my payment method, this will happen. What can I do next?

  • Sandeep Sharma
    Sandeep Sharma 4 years ago

    is there any video for reactive forms??

  • Eldar Khaitov
    Eldar Khaitov 3 years ago

    Why my controls are invisible on nested form?
    I have one master form and insert nested form with components. The nested forms are invisible.

  • Srujith Rao Ambati
    Srujith Rao Ambati Year ago +1

    Sir, I got an error that displayed "no directive found with exportAs ngModel". Can you please help me out?

    • Srujith Rao Ambati
      Srujith Rao Ambati Year ago

      @Lucas Lemos I did that but still got the error

    • Lucas Lemos
      Lucas Lemos Year ago

      Srujith Rao Ambati in your appmodule.ts import NgModule and FormsModule, if you not imported yet

  • Alejandra
    Alejandra 4 years ago

    Great video, thanks.

  • Slay S
    Slay S 2 years ago

    awesome job man!

  • Shaun 2099
    Shaun 2099 4 years ago

    This tutorial did not talk how to validate the form element, just validate each control, and not sure how to disable a button if the entire form is not valid, please add more details

  • Shilpi Jain
    Shilpi Jain 4 years ago +2

    I m getting below error
    There is no directive with "exportAs" set to "ngModel" ("ass="form-group">
    Name:
    ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/>

    • Netravati Koninte
      Netravati Koninte 2 years ago +1

      @Annu Singh this one works

    • Annu Singh
      Annu Singh 4 years ago

      for variable #firstName use varFirstName or _firstName | In short here ngModel name and variable name should not be same.

    • Madhu Sudhan
      Madhu Sudhan 4 years ago

      yes its working

    • Murali Naidu
      Murali Naidu 4 years ago

      even after doing this. it didnt work

    • Bilal Afridi
      Bilal Afridi 4 years ago +1

      you might have solved this but it could help others.

  • Williams Bron
    Williams Bron 10 months ago

    that was great Mosh
    it helps me a lot
    really really really really thank you Mosh😍😍😍😍😍

  • Suresh Babu
    Suresh Babu 2 years ago +1

    HI Mosh, Iam getting the Error: No value accessor for form control with name: 'firstName'
    plz let me know how to fix

  • علياء اسامه
    علياء اسامه 4 years ago

    thanks a lot .It is awesome

  • XoomPK
    XoomPK 4 years ago +1

    #firstName="ngModel" is not working for me. instead I have to use firstName="ngModel".
    but unable to use firstName in validation

    • savez momin
      savez momin 2 years ago

      i was also having problem with that thank you brother

  • Parikshit Sarkar
    Parikshit Sarkar 2 years ago

    How do you access the ngModel object from the browser console?

  • PsClip
    PsClip 2 years ago

    Can i use google drive for my form storage ?

  • Alyaa Abou_Elhamd
    Alyaa Abou_Elhamd 3 years ago +1

    thank you so much .. i need a reactive form video please

  • aO aM
    aO aM 3 years ago

    I like your videos.
    Thanks alot mosh 😃

    • aO aM
      aO aM 3 years ago

      Tejpal Singh
      😒
      I don't understand this language

    • Tejpal Singh
      Tejpal Singh 3 years ago

      حسبي الله لا اله الا هو الحي القيوم ggghhtt ho ki hi

  • Hanamant kj
    Hanamant kj 3 years ago

    asume dom elements [a,b..y,z] and there is change for elem => z now react dom changes only =>z BUT how its in angular will it rerender all [a to z] ..?

  • Science Seekho
    Science Seekho 10 months ago +1

    Your the best please upload all courses on udemy I am ready to pay

  • Ezz Tech
    Ezz Tech 4 years ago +1

    can you help me fixing this error, please
    There is no directive with "exportAs" set to "ngForm" ("]#f="ngForm" (ngSubmit)="submit(f)">
    I got this error with all form directives (ngForm, ngModel, ngModelGroup)

  • Tucson Rose
    Tucson Rose 2 years ago

    you made this easy to understand, I will still watch it again , though

  • Taimoor Hassan
    Taimoor Hassan 11 months ago

    how to get field line such as lable+input press tab please tell about the extension or methods?

  • Shiva
    Shiva Year ago

    Thank you Mosh for the video.

  • Imagine Rohit'S😎
    Imagine Rohit'S😎 5 months ago

    Its a great help..Thanks

  • mathieu fabre
    mathieu fabre Year ago

    really good video, good sound, good voice, and goos explanations. a f****ing good work !

  • anil websyn
    anil websyn 4 years ago

    very use full but i need how to post form and save in data base ..can you explain it please.

  • Raghu B Srinivas
    Raghu B Srinivas 3 years ago +1

    Thank you for this Information.

  • Maxi guzmán
    Maxi guzmán 3 years ago

    sos un groso , gracias , me salvaste la vida

  • Shilpi Jain
    Shilpi Jain 4 years ago +11

    I am getting this error
    There is no directive with "exportAs" set to "ngModel" ("ass="form-group">
    Name:
    ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/>

    • Petar Jovanovic
      Petar Jovanovic 3 years ago

      Did you solve that problem ,cuz I got the same ? Thanks!

    • Amaan Imtiyaz
      Amaan Imtiyaz 3 years ago +20

      For those whom are looking for the same:
      1.Go to app.module.ts
      2.Paste - import {FormsModule} from '@angular/forms' ;
      3. In "Imports" section down there: write FormModule eg: imports: [
      BrowserModule,
      FormsModule
      ]

    • bishoy wagih
      bishoy wagih 4 years ago +3

      you have to add the validation rule in input filed.. so change the input field from ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/> to ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/>

  • Sergio OP
    Sergio OP 4 years ago +3

    damn..., your content is great! i would love to know more english so i can understand you better :P

  • Fahad Hafeez
    Fahad Hafeez Year ago +1

    You will get this error: TS2531: Object is possibly 'null'.
    Solve this by this solution:
    go to tsconfig.json and add "strictNullChecks":false

    • Nara Webdev
      Nara Webdev Year ago

      By the way, did errors.valid worked for you? Cause It seems to not working for me.

    • Nara Webdev
      Nara Webdev Year ago +1

      Just this line wasn't enough for me, but with the help of your comment I find what works for me. Go to main tsconfig.json and there write: "strict":false, "strictPropertyInitialization": false,
      "strictNullChecks": false. But anyway, thanks for your comment!

  • Eric Wilfried Ettien
    Eric Wilfried Ettien 4 years ago +1

    Thank you very much !

  • Hassan Aguezoum
    Hassan Aguezoum 2 years ago

    Thank you ❤

  • Faisal Mushtaq
    Faisal Mushtaq 2 years ago

    An excellent tutorial indedd

  • Ameya Shetti
    Ameya Shetti 4 years ago

    I think this video should change getting error There is no directive with "exportAs" set to "ngModel" need to add FormsModule in the app Module import.

    • Ameya Shetti
      Ameya Shetti 4 years ago

      Import formmodules in app- module. Ts of your project

    • Shilpi Jain
      Shilpi Jain 4 years ago

      I m also getting the same error ,how u have solved
      There is no directive with "exportAs" set to "ngModel" ("ass="form-group">
      Name:
      ]#firstName="ngModel" (change)="log(firstName)" type="text" class="form-control" id="firstName"/>

  • Tamil TechGeek
    Tamil TechGeek 3 years ago

    how to add js file to angular html component.I am able to link normal html file to a js file using script tag and run in node.js but unable to do same in angular component.Please help.

  • alaa moustafa
    alaa moustafa 4 years ago

    you are perfect !

  • Darpan Sarma
    Darpan Sarma 3 years ago +1

    Help...I am getting this error
    "contact-form is a not a known element"
    [ERROR->]

  • CV Chanel
    CV Chanel 2 years ago

    Thank you verry much :)

  • Sushil Sharma
    Sushil Sharma 4 years ago

    Thanks a lot Mosh

  • Naresh Kumar
    Naresh Kumar 3 years ago +2

    Thank You Mosh!

  • lerato mphahlele
    lerato mphahlele 11 months ago

    in the beginning of the video you said you will show us how to make submit button active when all fields are valid???

  • Arjun Sunny
    Arjun Sunny Year ago

    ERROR in src/app/admin/form/form.component.html:36:29 - error NG8003: No directive found with exportAs 'ngModel'.

    36 #firstName="ngModel"

    • Arjun Sunny
      Arjun Sunny Year ago

      Bernat Rivera ... all set?

    • Bernat Rivera
      Bernat Rivera Year ago +3

      Hi Arjun,
      I faced the same issue as you. Try to import the "FormsModule" as show in this stackoverflow thread:
      stackoverflow.com/questions/38648407/angular2-error-there-is-no-directive-with-exportas-set-to-ngform
      In my case it solved the issue.

  • Cinema Reels
    Cinema Reels 3 years ago

    Thank you so much Mosh

  • bmulamba
    bmulamba Year ago

    this is awersome thank you

  • Salman Manzoor
    Salman Manzoor Year ago

    at 4:33 are you using css??

  • Subin Y.
    Subin Y. 4 years ago

    thanks.. good jobs

  • AP S
    AP S Year ago +2

    You didn't explain how bootstrap css class was being applied on form? For me classes are not being applied?

    • Kaushik Das
      Kaushik Das 11 months ago

      @Abderazzak Mnai Moutaanni bootstrap cdn link copy paste is more easy than this

    • Abderazzak Mnai Moutaanni
      Abderazzak Mnai Moutaanni Year ago

      install bootstrap by executing the cmd npm install --save bootstrap
      then go to angular.json file and add on "styles" : "node_modules/bootstrap/dist/css/bootstrap.css",

    • Esteban Sepulveda
      Esteban Sepulveda Year ago

      @Roberto Radu thanks buddy! This should be added to the html file. Though I still dont see the red alert when the error pops up

    • Toshi
      Toshi Year ago

      6 months late but you can add the bootstrap.min.css relative path to your angular.json styles property which will give you global access to bootstrap. Or I think you can link it in the stylesUrl attribute within the component decorator within the ts file. Or you could do what @Roberto Radu said and link it directly within the html.

  • NexoPOS
    NexoPOS 4 years ago +1

    I got an issue... with the template variable (#formName). Returns There is no directive with "exportAs" set to "ngModel"

    • cardflopper
      cardflopper 4 years ago +1

      don't forget the "s", it is FormsModule, not FormModule

    • Greyson Yee
      Greyson Yee 4 years ago

      same issue here, both FormModule and ReactiveFormModule is imported. Please help.

  • Priyesh Prince
    Priyesh Prince 2 years ago +1

    Thanks Mr tutor

  • Ezz Abuzaid
    Ezz Abuzaid 4 years ago

    You're great

  • KT HT
    KT HT 3 years ago

    Thank you so much

  • cellocarlos
    cellocarlos 3 years ago

    The validation is nice, but once I have to do it all again in the server, it is not that awesome...