"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
+ "@angular/forms": "^0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"ie-shim": "^0.1.0",
"intl": "^1.2.4",
"json-loader": "^0.5.4",
- "ng2-bootstrap": "1.0.16",
+ "ng2-bootstrap": "1.0.24",
"ng2-file-upload": "^1.0.3",
"node-sass": "^3.7.0",
"normalize.css": "^4.1.1",
<div *ngIf="information" class="alert alert-success">{{ information }}</div>
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form role="form" (ngSubmit)="changePassword(newPassword.value, newConfirmedPassword.value)" [ngFormModel]="changePasswordForm">
+<form role="form" (ngSubmit)="changePassword()" [formGroup]="changePasswordForm">
<div class="form-group">
<label for="new-password">New password</label>
<input
type="password" class="form-control" name="new-password" id="new-password"
- ngControl="newPassword" #newPassword="ngForm"
+ [(ngModel)]="newPassword" #newPasswordInput="ngModel"
>
- <div [hidden]="newPassword.valid || newPassword.pristine" class="alert alert-warning">
+ <div [hidden]="changePasswordForm.controls['new-password'].valid || changePasswordForm.controls['new-password'].pristine" class="alert alert-warning">
The password should have more than 5 characters
</div>
</div>
<label for="name">Confirm new password</label>
<input
type="password" class="form-control" name="new-confirmed-password" id="new-confirmed-password"
- ngControl="newConfirmedPassword" #newConfirmedPassword="ngForm"
+ [(ngModel)]="newConfirmedPassword" #newConfirmedPasswordInput="ngModel"
>
</div>
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { Router } from '@angular/router';
import { AccountService } from './account.service';
@Component({
selector: 'my-account',
template: require('./account.component.html'),
- providers: [ AccountService ]
+ providers: [ AccountService ],
+ directives: [ REACTIVE_FORM_DIRECTIVES ]
})
export class AccountComponent implements OnInit {
- changePasswordForm: ControlGroup;
+ newPassword = '';
+ newConfirmedPassword = '';
+ changePasswordForm: FormGroup;
information: string = null;
error: string = null;
) {}
ngOnInit() {
- this.changePasswordForm = new ControlGroup({
- newPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
- newConfirmedPassword: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
+ this.changePasswordForm = new FormGroup({
+ 'new-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
+ 'new-confirmed-password': new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
});
}
- changePassword(newPassword: string, newConfirmedPassword: string) {
+ changePassword() {
this.information = null;
this.error = null;
- if (newPassword !== newConfirmedPassword) {
+ if (this.newPassword !== this.newConfirmedPassword) {
this.error = 'The new password and the confirmed password do not correspond.';
return;
}
- this.accountService.changePassword(newPassword).subscribe(
+ this.accountService.changePassword(this.newPassword).subscribe(
ok => this.information = 'Password updated.',
err => this.error = err
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form role="form" (ngSubmit)="makeFriends()">
+<form (ngSubmit)="makeFriends()">
<div class="form-group" *ngFor="let url of urls; let id = index; trackBy:customTrackBy">
<label for="username">Url</label>
<div class="input-group">
- <input type="text" class="form-control" name="url" id="url" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
+ <input type="text" class="form-control" [name]="'url-' + id" [id]="'url-' + id" placeholder="http://domain.com" [(ngModel)]="urls[id]" />
<span class="input-group-btn">
<button *ngIf="displayAddField(id)" (click)="addField()" class="btn btn-default" type="button">+</button>
<button *ngIf="displayRemoveField(id)" (click)="removeField(index)" class="btn btn-default" type="button">-</button>
return;
}
- const confirmMessage = 'Are you sure to make friends with:\n - ' + this.urls.join('\n - ');
+ const confirmMessage = 'Are you sure to make friends with:\n - ' + notEmptyUrls.join('\n - ');
if (!confirm(confirmMessage)) return;
this.friendService.makeFriends(notEmptyUrls).subscribe(
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form role="form" (ngSubmit)="addUser(username.value, password.value)" #addUserForm="ngForm">
+<form role="form" (ngSubmit)="addUser()" [formGroup]="userAddForm">
<div class="form-group">
<label for="username">Username</label>
<input
- type="text" class="form-control" name="username" id="username" placeholder="Username" required
- ngControl="username" #username="ngForm"
+ type="text" class="form-control" name="username" id="username" placeholder="Username"
+ [(ngModel)]="username"
>
- <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
+ <div [hidden]="userAddForm.controls.username.valid || userAddForm.controls.username.pristine" class="alert alert-danger">
Username is required with a length >= 3 and <= 20
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
- type="password" class="form-control" name="password" id="password" placeholder="Password" required
- ngControl="password" #password="ngForm"
+ type="password" class="form-control" name="password" id="password" placeholder="Password"
+ [(ngModel)]="password"
>
- <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
+ <div [hidden]="userAddForm.controls.password.valid || userAddForm.controls.password.pristine" class="alert alert-danger">
Password is required with a length >= 6
</div>
</div>
- <input type="submit" value="Add user" class="btn btn-default" [disabled]="!addUserForm.form.valid">
+ <input type="submit" value="Add user" class="btn btn-default" [disabled]="!userAddForm.valid">
</form>
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { Router } from '@angular/router';
import { UserService } from '../shared';
@Component({
selector: 'my-user-add',
template: require('./user-add.component.html'),
+ directives: [ REACTIVE_FORM_DIRECTIVES ]
})
export class UserAddComponent implements OnInit {
- userAddForm: ControlGroup;
+ userAddForm: FormGroup;
error: string = null;
+ username = '';
+ password = '';
constructor(private router: Router, private userService: UserService) {}
ngOnInit() {
- this.userAddForm = new ControlGroup({
- username: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(20) ])),
- password: new Control('', Validators.compose([ Validators.required, Validators.minLength(6) ])),
+ this.userAddForm = new FormGroup({
+ username: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(20) ]),
+ password: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(6) ]),
});
}
- addUser(username: string, password: string) {
+ addUser() {
this.error = null;
- this.userService.addUser(username, password).subscribe(
+ this.userService.addUser(this.username, this.password).subscribe(
ok => this.router.navigate([ '/admin/users/list' ]),
err => this.error = err
<h3>Login</h3>
-
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form role="form" (ngSubmit)="login(username.value, password.value)" #loginForm="ngForm">
+<form role="form" (ngSubmit)="login()" [formGroup]="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input
- type="text" class="form-control" name="username" id="username" placeholder="Username" required
- ngControl="username" #username="ngForm"
+ type="text" class="form-control" name="username" id="username" placeholder="Username"
+ [(ngModel)]="username"
>
- <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
+ <div [hidden]="loginForm.controls.username.valid || loginForm.controls.username.pristine" class="alert alert-danger">
Username is required
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
- type="password" class="form-control" name="password" id="password" placeholder="Password" required
- ngControl="password" #password="ngForm"
+ type="password" class="form-control" name="password" id="password" placeholder="Password"
+ [(ngModel)]="password"
>
- <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
+ <div [hidden]="loginForm.controls.password.valid || loginForm.controls.password.pristine" class="alert alert-danger">
Password is required
</div>
</div>
- <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.form.valid">
+ <input type="submit" value="Login" class="btn btn-default" [disabled]="!loginForm.valid">
</form>
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Validators } from '@angular/common';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../shared';
@Component({
selector: 'my-login',
- template: require('./login.component.html')
+ template: require('./login.component.html'),
+ directives: [ REACTIVE_FORM_DIRECTIVES ]
})
-export class LoginComponent {
+export class LoginComponent implements OnInit {
error: string = null;
+ username = '';
+ password: '';
+ loginForm: FormGroup;
constructor(
private authService: AuthService,
private router: Router
) {}
- login(username: string, password: string) {
- this.authService.login(username, password).subscribe(
+ ngOnInit() {
+ this.loginForm = new FormGroup({
+ username: new FormControl('', [ <any>Validators.required ]),
+ password: new FormControl('', [ <any>Validators.required ]),
+ });
+ }
+
+ login() {
+ this.authService.login(this.username, this.password).subscribe(
result => {
this.error = null;
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
-<form novalidate (ngSubmit)="upload()" [ngFormModel]="videoForm">
+<form novalidate (ngSubmit)="upload()" [formGroup]="videoForm">
<div class="form-group">
<label for="name">Name</label>
<input
type="text" class="form-control" name="name" id="name"
- ngControl="name" #name="ngForm" [(ngModel)]="video.name"
+ [(ngModel)]="video.name"
>
- <div [hidden]="name.valid || name.pristine" class="alert alert-warning">
+ <div [hidden]="videoForm.controls.name.valid || videoForm.controls.name.pristine" class="alert alert-warning">
A name is required and should be between 3 and 50 characters long
</div>
</div>
<label for="tags">Tags</label>
<input
type="text" class="form-control" name="tags" id="tags"
- ngControl="tags" #tags="ngForm" [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
+ [disabled]="isTagsInputDisabled" (keyup)="onTagKeyPress($event)" [(ngModel)]="currentTag"
>
- <div [hidden]="tags.valid || tags.pristine" class="alert alert-warning">
+ <div [hidden]="videoForm.controls.tags.valid || videoForm.controls.tags.pristine" class="alert alert-warning">
A tag should be between 2 and 10 characters (alphanumeric) long
</div>
</div>
<label for="description">Description</label>
<textarea
name="description" id="description" class="form-control" placeholder="Description..."
- ngControl="description" #description="ngForm" [(ngModel)]="video.description"
+ [(ngModel)]="video.description"
>
</textarea>
- <div [hidden]="description.valid || description.pristine" class="alert alert-warning">
+ <div [hidden]="videoForm.controls.description.valid || videoForm.controls.description.pristine" class="alert alert-warning">
A description is required and should be between 3 and 250 characters long
</div>
</div>
-import { Control, ControlGroup, Validators } from '@angular/common';
+import { Validators } from '@angular/common';
import { Component, ElementRef, OnInit } from '@angular/core';
+import { FormControl, FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { Router } from '@angular/router';
import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
selector: 'my-videos-add',
styles: [ require('./video-add.component.scss') ],
template: require('./video-add.component.html'),
- directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES ],
+ directives: [ FileSelectDirective, PROGRESSBAR_DIRECTIVES, REACTIVE_FORM_DIRECTIVES ],
pipes: [ BytesPipe ]
})
export class VideoAddComponent implements OnInit {
currentTag: string; // Tag the user is writing in the input
error: string = null;
- videoForm: ControlGroup;
+ videoForm: FormGroup;
uploader: FileUploader;
video = {
name: '',
}
ngOnInit() {
- this.videoForm = new ControlGroup({
- name: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(50) ])),
- description: new Control('', Validators.compose([ Validators.required, Validators.minLength(3), Validators.maxLength(250) ])),
- tags: new Control('', Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
+ this.videoForm = new FormGroup({
+ name: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(50) ]),
+ description: new FormControl('', [ <any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(250) ]),
+ tags: new FormControl('', <any>Validators.pattern('^[a-zA-Z0-9]{2,10}$'))
});
import { enableProdMode, provide } from '@angular/core';
+import { disableDeprecatedForms, provideForms } from '@angular/forms';
import {
HTTP_PROVIDERS,
RequestOptions,
},
deps: [ XHRBackend, RequestOptions, AuthService ]
}),
+
AuthService,
- provideRouter(routes)
+
+ provideRouter(routes),
+
+ disableDeprecatedForms(),
+ provideForms()
]);
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
+import '@angular/forms';
import '@angular/http';
import '@angular/router';
projects / oweals / peertube.git / commitdiff