|
4148 | 4148 | </label> |
4149 | 4149 | ``` |
4150 | 4150 | Finally, the component with reactive form control appears as below, |
4151 | | - ```js |
4152 | | - import { Component } from '@angular/core'; |
4153 | | - import { FormControl } from '@angular/forms'; |
4154 | | -
|
4155 | | - @Component({ |
4156 | | - selector: 'user-profile', |
4157 | | - styleUrls: ['./user-profile.component.css'] |
4158 | | - template: ` |
4159 | | - <label> |
4160 | | - User name: |
4161 | | - <input type="text" [formControl]="userName"> |
4162 | | - </label> |
4163 | | - ` |
4164 | | - }) |
4165 | | - export class UserProfileComponent { |
4166 | | - userName = new FormControl(''); |
4167 | | - } |
4168 | | - ``` |
| 4151 | + ```js |
| 4152 | + import { Component } from '@angular/core'; |
| 4153 | + import { FormControl } from '@angular/forms'; |
| 4154 | + |
| 4155 | + @Component({ |
| 4156 | + selector: 'user-profile', |
| 4157 | + styleUrls: ['./user-profile.component.css'], |
| 4158 | + template: ` |
| 4159 | + <label> |
| 4160 | + User name: |
| 4161 | + <input type="text" [formControl]="userName"> |
| 4162 | + </label> |
| 4163 | + ` |
| 4164 | + }) |
| 4165 | + export class UserProfileComponent { |
| 4166 | + userName = new FormControl(''); |
| 4167 | + } |
| 4168 | + ``` |
4169 | 4169 |
|
4170 | 4170 | **[⬆ Back to Top](#table-of-contents)** |
4171 | 4171 |
|
|
4200 | 4200 | 2. Bind the form from template to the component using ngModel syntax |
4201 | 4201 | ```html |
4202 | 4202 | <input type="text" class="form-control" id="name" |
4203 | | - required |
4204 | | - [(ngModel)]="model.name" name="name"> |
| 4203 | + required |
| 4204 | + [(ngModel)]="model.name" name="name"> |
4205 | 4205 | ``` |
4206 | 4206 | 3. Attach NgForm directive to the <form> tag in order to create FormControl instances and register them |
4207 | 4207 | ```js |
|
4225 | 4225 | // Form goes here |
4226 | 4226 | <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button> |
4227 | 4227 | ``` |
4228 | | -
|
4229 | 4228 | Finally, the completed template-driven registration form will be appeared as follow. |
4230 | | -
|
4231 | | - ```html |
4232 | | - <div class="container"> |
4233 | | - <h1>Registration Form</h1> |
4234 | | - <form (ngSubmit)="onSubmit()" #registerForm="ngForm"> |
4235 | | - <div class="form-group"> |
4236 | | - <label for="name">Name</label> |
4237 | | - <input type="text" class="form-control" id="name" |
4238 | | - required |
4239 | | - [(ngModel)]="model.name" name="name" |
4240 | | - #name="ngModel"> |
4241 | | - <div [hidden]="name.valid || name.pristine" |
4242 | | - class="alert alert-danger"> |
4243 | | - Please enter your name |
4244 | | - </div> |
4245 | | - </div> |
4246 | | - <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button> |
4247 | | - </form> |
| 4229 | + ```html |
| 4230 | + <div class="container"> |
| 4231 | + <h1>Registration Form</h1> |
| 4232 | + <form (ngSubmit)="onSubmit()" #registerForm="ngForm"> |
| 4233 | + <div class="form-group"> |
| 4234 | + <label for="name">Name</label> |
| 4235 | + <input type="text" class="form-control" id="name" |
| 4236 | + required |
| 4237 | + [(ngModel)]="model.name" name="name" |
| 4238 | + #name="ngModel"> |
| 4239 | + <div [hidden]="name.valid || name.pristine" |
| 4240 | + class="alert alert-danger"> |
| 4241 | + Please enter your name |
| 4242 | + </div> |
4248 | 4243 | </div> |
4249 | | - ``` |
| 4244 | + <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button> |
| 4245 | + </form> |
| 4246 | + </div> |
| 4247 | + ``` |
4250 | 4248 |
|
4251 | 4249 | **[⬆ Back to Top](#table-of-contents)** |
4252 | 4250 |
|
|
0 commit comments