|
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