diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2016-09-09 22:16:51 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2016-09-09 22:16:51 +0200 |
commit | 4b2f33f3c6d109365090b08244d7f99ad4e69025 (patch) | |
tree | 700d3e8e14efc4172f754d75c041ec507100e897 /client/src/app/admin/users/user-add | |
parent | ab32b0fc805b92c5a1d7ac5901cb1a38e94622ca (diff) | |
download | PeerTube-4b2f33f3c6d109365090b08244d7f99ad4e69025.tar.gz PeerTube-4b2f33f3c6d109365090b08244d7f99ad4e69025.tar.zst PeerTube-4b2f33f3c6d109365090b08244d7f99ad4e69025.zip |
Client: reactive forms
Diffstat (limited to 'client/src/app/admin/users/user-add')
-rw-r--r-- | client/src/app/admin/users/user-add/user-add.component.html | 20 | ||||
-rw-r--r-- | client/src/app/admin/users/user-add/user-add.component.ts | 44 |
2 files changed, 43 insertions, 21 deletions
diff --git a/client/src/app/admin/users/user-add/user-add.component.html b/client/src/app/admin/users/user-add/user-add.component.html index 09219893b..9b76c7c1b 100644 --- a/client/src/app/admin/users/user-add/user-add.component.html +++ b/client/src/app/admin/users/user-add/user-add.component.html | |||
@@ -2,28 +2,28 @@ | |||
2 | 2 | ||
3 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | 3 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
4 | 4 | ||
5 | <form role="form" (ngSubmit)="addUser()" [formGroup]="userAddForm"> | 5 | <form role="form" (ngSubmit)="addUser()" [formGroup]="form"> |
6 | <div class="form-group"> | 6 | <div class="form-group"> |
7 | <label for="username">Username</label> | 7 | <label for="username">Username</label> |
8 | <input | 8 | <input |
9 | type="text" class="form-control" name="username" id="username" placeholder="Username" | 9 | type="text" class="form-control" id="username" placeholder="Username" |
10 | [(ngModel)]="username" | 10 | formControlName="username" |
11 | > | 11 | > |
12 | <div [hidden]="userAddForm.controls.username.valid || userAddForm.controls.username.pristine" class="alert alert-danger"> | 12 | <div *ngIf="formErrors.username" class="alert alert-danger"> |
13 | Username is required with a length >= 3 and <= 20 | 13 | {{ formErrors.username }} |
14 | </div> | 14 | </div> |
15 | </div> | 15 | </div> |
16 | 16 | ||
17 | <div class="form-group"> | 17 | <div class="form-group"> |
18 | <label for="password">Password</label> | 18 | <label for="password">Password</label> |
19 | <input | 19 | <input |
20 | type="password" class="form-control" name="password" id="password" placeholder="Password" | 20 | type="password" class="form-control" id="password" placeholder="Password" |
21 | [(ngModel)]="password" | 21 | formControlName="password" |
22 | > | 22 | > |
23 | <div [hidden]="userAddForm.controls.password.valid || userAddForm.controls.password.pristine" class="alert alert-danger"> | 23 | <div *ngIf="formErrors.password" class="alert alert-danger"> |
24 | Password is required with a length >= 6 | 24 | {{ formErrors.password }} |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | <input type="submit" value="Add user" class="btn btn-default" [disabled]="!userAddForm.valid"> | 28 | <input type="submit" value="Add user" class="btn btn-default" [disabled]="!form.valid"> |
29 | </form> | 29 | </form> |
diff --git a/client/src/app/admin/users/user-add/user-add.component.ts b/client/src/app/admin/users/user-add/user-add.component.ts index e3f4b2e1a..b79437795 100644 --- a/client/src/app/admin/users/user-add/user-add.component.ts +++ b/client/src/app/admin/users/user-add/user-add.component.ts | |||
@@ -1,32 +1,54 @@ | |||
1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
2 | import { FormGroup, FormControl, Validators } from '@angular/forms'; | 2 | import { FormBuilder, FormGroup } from '@angular/forms'; |
3 | import { Router } from '@angular/router'; | 3 | import { Router } from '@angular/router'; |
4 | 4 | ||
5 | import { UserService } from '../shared'; | 5 | import { UserService } from '../shared'; |
6 | import { FormReactive, USER_USERNAME, USER_PASSWORD } from '../../../shared'; | ||
6 | 7 | ||
7 | @Component({ | 8 | @Component({ |
8 | selector: 'my-user-add', | 9 | selector: 'my-user-add', |
9 | template: require('./user-add.component.html') | 10 | template: require('./user-add.component.html') |
10 | }) | 11 | }) |
11 | export class UserAddComponent implements OnInit { | 12 | export class UserAddComponent extends FormReactive implements OnInit { |
12 | userAddForm: FormGroup; | ||
13 | error: string = null; | 13 | error: string = null; |
14 | username = ''; | ||
15 | password = ''; | ||
16 | 14 | ||
17 | constructor(private router: Router, private userService: UserService) {} | 15 | form: FormGroup; |
16 | formErrors = { | ||
17 | 'username': '', | ||
18 | 'password': '' | ||
19 | }; | ||
20 | validationMessages = { | ||
21 | 'username': USER_USERNAME.MESSAGES, | ||
22 | 'password': USER_PASSWORD.MESSAGES, | ||
23 | }; | ||
18 | 24 | ||
19 | ngOnInit() { | 25 | constructor( |
20 | this.userAddForm = new FormGroup({ | 26 | private formBuilder: FormBuilder, |
21 | username: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(20) ]), | 27 | private router: Router, |
22 | password: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]), | 28 | private userService: UserService |
29 | ) { | ||
30 | super(); | ||
31 | } | ||
32 | |||
33 | buildForm() { | ||
34 | this.form = this.formBuilder.group({ | ||
35 | username: [ '', USER_USERNAME.VALIDATORS ], | ||
36 | password: [ '', USER_PASSWORD.VALIDATORS ], | ||
23 | }); | 37 | }); |
38 | |||
39 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)); | ||
40 | } | ||
41 | |||
42 | ngOnInit() { | ||
43 | this.buildForm(); | ||
24 | } | 44 | } |
25 | 45 | ||
26 | addUser() { | 46 | addUser() { |
27 | this.error = null; | 47 | this.error = null; |
28 | 48 | ||
29 | this.userService.addUser(this.username, this.password).subscribe( | 49 | const { username, password } = this.form.value; |
50 | |||
51 | this.userService.addUser(username, password).subscribe( | ||
30 | ok => this.router.navigate([ '/admin/users/list' ]), | 52 | ok => this.router.navigate([ '/admin/users/list' ]), |
31 | 53 | ||
32 | err => this.error = err.text | 54 | err => this.error = err.text |