Guest User

Untitled

a guest
Jan 8th, 2018
108
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.05 KB | None | 0 0
  1. <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  2. <div class="form-group">
  3. <label for="username">Username</label>
  4. <input
  5. type="text"
  6. name="username"
  7. class="form-control"
  8. formControlName="username"
  9. >
  10. <div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
  11. username is required
  12. </div>
  13. </div>
  14.  
  15. <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  16. <div class="form-group">
  17. <label for="username">Username</label>
  18. <input
  19. type="text"
  20. name="username"
  21. class="form-control"
  22. formControlName="username"
  23. >
  24. <div *ngIf="username.invalid" class="alert alert-danger">
  25. username is required
  26. </div>
  27. </div>
  28.  
  29. import {Component} from '@angular/core';
  30. import {FormGroup, FormControl, Validators} from '@angular/forms';
  31.  
  32. @Component({
  33. selector: 'sign-up',
  34. templateUrl: 'app/sign-up.component.html'
  35. })
  36.  
  37. export class SignUpComponent {
  38.  
  39. myForm = new FormGroup({
  40. username: new FormControl('username', Validators.required),
  41. password: new FormControl('', Validators.required),
  42. });
  43. }
  44.  
  45. export class SignUpComponent implements OnInit {
  46.  
  47. myForm: FormGroup;
  48. usernameCtrl: FormControl;
  49. passwordCtrl: FormControl;
  50.  
  51. ngOnInit() {
  52. this.usernameCtrl = new FormControl('username', Validators.required);
  53. this.passwordCtrl = new FormControl('', Validators.required);
  54.  
  55. this.myForm = new FormGroup({
  56. username: this.usernameCtrl,
  57. password: this.passwordCtrl
  58. });
  59. }
  60. }
  61.  
  62. export class SignUpComponent implements OnInit {
  63.  
  64. myForm: FormGroup;
  65. usernameCtrl: FormControl;
  66. passwordCtrl: FormControl;
  67.  
  68. constructor(private formBuilder: FormBuilder) { }
  69.  
  70. ngOnInit() {
  71. this.usernameCtrl = this.formBuilder.control('username', Validators.required);
  72. this.passwordCtrl = this.formBuilder.control('', Validators.required);
  73.  
  74. this.myForm = this.formBuilder.group({
  75. username: this.usernameCtrl,
  76. password: this.passwordCtrl
  77. });
  78. }
  79. }
  80.  
  81. <div *ngIf="usernameCtrl.invalid" class="alert alert-danger">
  82. username is required
  83. </div>
  84.  
  85. <input type="text"
  86. name="username"
  87. class="form-control"
  88. [formControl]="usernameCtrl">
  89.  
  90. usernameCtrl: FormControl;
  91. passwordCtrl: FormControl;
  92. ...
  93. this.usernameCtrl = this.formBuilder.control('username',Validators.required);
  94. this.passwordCtrl = this.formBuilder.control('', Validators.required);
  95.  
  96. ngOnInit() {
  97. this.myForm = this.formBuilder.group({
  98. username: ['usename', Validators.required]
  99. password: ['', Validators.required]
  100. });
  101.  
  102. get username() { return this.myForm.get('username'); }
  103. get password() { return this.myForm.get('password'); }
  104.  
  105. <div [formGroup]="myForm">
  106. ...
  107. </div>
  108.  
  109. <input type="text"
  110. name="username"
  111. class="form-control"
  112. formControlName="username">
  113. <div *ngIf="username.invalid" class="alert alert-danger">
  114. username is required
  115. </div>
  116.  
  117. <input type="text"
  118. name="password"
  119. class="form-control"
  120. formControlName="password">
  121. <div *ngIf="password.invalid" class="alert alert-danger">
  122. password is required
  123. </div>
Add Comment
Please, Sign In to add comment