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/user-add.component.ts | |
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/user-add.component.ts')
-rw-r--r-- | client/src/app/admin/users/user-add/user-add.component.ts | 44 |
1 files changed, 33 insertions, 11 deletions
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 |