Angular Templates Driven Form
                      
TeimFopulart eC-oDnrsivuelnta Fnocryms
 
https://www.ifourtechnolab.com/
Index
❏ Introduction
❏ Building a Bootstrap Form 
❏ Types of Forms
❏ ngModel
❏ Adding Validation
❏ Specific Validation Errors
❏ ngForm
❏ ngModelGroup
❏ Disabling the Submit Button
https://www.ifourtechnolab.com/
❑Introduction
❏ Forms are the mainstay of business applications. You use 
forms to log in, submit a help request, place an order, book a 
flight, schedule a meeting, and perform countless other data-
entry tasks.
❏ Applications use forms to enable users to log in, to update a     Template-driven Forms
profile, to enter sensitive information, and to perform many 
other data-entry tasks.
❏ Template-driven forms are useful for adding a simple form to 
an app, such as an email list signup form. They're easy to add to 
an app, but they don't scale as well as reactive forms.
❏ If you have very basic form requirements and logic that can be 
managed solely in the template, use template-driven forms.
https://www.ifourtechnolab.com/
  Building a Bootstrap Form 
❏ For adding Bootstrap theme into our application we insert
      this following link to our index.html:-

    
❏ We can add bootstrap-css into style.css 
❏ Then we generate a component into our application by 
      the command:-  ng g component information
       
https://www.ifourtechnolab.com/
❑Building a Bootstrap Form
❏ Then in Information.component.html we write:-
  
Name
 
  

 Contact Number
 
  
                                                                                                                                                                        Contd…..
      https://www.ifourtechnolab.com/
❑Building a Bootstrap Form

  {{pow}} 
 

 
 

  Male

          Name is required
        
                                                                                                                                                                                                        Contd……
https://www.ifourtechnolab.com/
ngForm

 Contact Number
 
  

  {{pow}} 
 
https://www.ifourtechnolab.com/
ngForm

 
 

  Male

          Name is required
        
       
 Submit
      Reset

https://www.ifourtechnolab.com/
Thank you
https://www.ifourtechnolab.com/