compatibility

src/app/app.module.ts

 //built in angular modules
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 //external modules
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -30,6 +30,7 @@ import { RightService } from './modules/rights/services/right.service';
   imports: [
     BrowserModule,
     FormsModule,
+    ReactiveFormsModule,
     HttpModule,
     AppRoutingModule,
     NgbModule.forRoot(),

src/app/modules/rights/models/right.ts

 export class Right {
     id: string;
-    Name: string;
+    name: string;
 }

src/app/modules/rights/right/right.component.html

@@ -7,7 +7,7 @@
   <div class="form-group row">
     <label for="Name" class="col-2 col-form-label">Name</label>
     <div class="col-10">
-      <input id="Name" class="form-control" type="text" [(ngModel)]="right.Name" placeholder="Name" />
+      <input id="Name" class="form-control" type="text" [(ngModel)]="right.name" placeholder="Name" />
     </div>
   </div>
 </div>
@@ -17,7 +17,7 @@
     <label for="Name" class="col-2 col-form-label">Name</label>
     <div class="col-10">
       <p class="form-control-static">
-        {{right.Name}}
+        {{right.name}}
       </p>
     </div>
   </div>

src/app/modules/rights/rights.component.html

@@ -13,7 +13,7 @@
   <tbody>
     <tr *ngFor="let right of rights">
       <th scope="row">{{right.id}}</th>
-      <td>{{right.Name}}</td>
+      <td>{{right.name}}</td>
       <td>
         <button type="button" class="btn btn-sm btn-outline-info" (click)="details(right.id)">Details</button>
         <button type="button" class="btn btn-sm btn-outline-warning" (click)="edit(right.id)">Edit</button>

src/app/modules/rights/services/right.service.ts

@@ -16,10 +16,18 @@ export class RightService {
   ) { }
 
   getRights(): Promise<Right[]> {
+    return this.http.get(this.rightsUrl)
+      .toPromise()
+      .then(response =>
+        response.json() as Right[])
+      ;
+  }
+
+  getRightsForCombo(): Promise<Right[]> {
     return this.http.get(this.rightsUrl + "/get-rights-for-combo")
       .toPromise()
       .then(response =>
-        response.json().rights as Right[])
+        response.json() as Right[])
       ;
   }
 
@@ -27,14 +35,14 @@ export class RightService {
     const url = `${this.rightsUrl}/${id}`;
     return this.http.get(url)
       .toPromise()
-      .then(response => response.json().right as Right);
+      .then(response => response.json() as Right);
   }
 
   createRight(right: Right): Promise<Right> {
     return this.http
       .post(this.rightsUrl, JSON.stringify(right), { headers: this.headers })
       .toPromise()
-      .then(res => res.json().right)
+      .then(res => res.json())
       .catch(this.handleError);
   }
 
@@ -42,7 +50,7 @@ export class RightService {
     return this.http
       .put(this.rightsUrl, JSON.stringify(right), { headers: this.headers })
       .toPromise()
-      .then(res => res.json().right)
+      .then(res => res.json())
       .catch(this.handleError);
   }
 

src/app/modules/users/models/user.ts

 export class User {
     id: number;
-    BirthDate: any;
-    FirstName: string;
-    LastName: string;
-    UserName: string;
-    Rights: any[];
+    birthDate: any;
+    firstName: string;
+    lastName: string;
+    userName: string;
+    rights: any[];
+    rightsDisplay: string;
 }

src/app/modules/users/services/user.service.ts

@@ -19,7 +19,7 @@ export class UserService {
     return this.http.get(this.usersUrl)
       .toPromise()
       .then(response =>
-        response.json().users as User[])
+        response.json() as User[])
       ;
   }
 
@@ -28,8 +28,8 @@ export class UserService {
     return this.http.get(url)
       .toPromise()
       .then(response => {
-        let user = response.json().user as User;
-        user.BirthDate = this.parserFormatter.parse(user.BirthDate);
+        let user = response.json() as User;
+        user.birthDate = this.parserFormatter.parse(user.birthDate);
         return user;
       });
   }
@@ -42,7 +42,7 @@ export class UserService {
   }
 
   createUser(user: User): Promise<User> {
-    user.BirthDate = this.parserFormatter.format(user.BirthDate);
+    user.birthDate = this.parserFormatter.format(user.birthDate);
     return this.http
       .post(this.usersUrl, JSON.stringify(user), { headers: this.headers })
       .toPromise()
@@ -51,12 +51,12 @@ export class UserService {
   }
 
   updateUser(user: User): Promise<User> {
-    user.BirthDate = this.parserFormatter.format(user.BirthDate);
+    user.birthDate = this.parserFormatter.format(user.birthDate);
     return this.http
       .put(this.usersUrl, JSON.stringify(user), { headers: this.headers })
       .toPromise()
       .then(res => {
-        return res.json().user;
+        return res.json();
       })
       .catch(this.handleError);
   }

src/app/modules/users/user/user.component.html

@@ -5,45 +5,66 @@
   <button type="button" class="btn btn-sm btn-outline-success float-right" (click)="save()" [hidden]="!editMode">Save</button>
   <hr>
   <div *ngIf="editMode">
-    <div class="form-group row">
-      <label for="first-name" class="col-2 col-form-label">Firstname</label>
-      <div class="col-10">
-        <input id="first-name" class="form-control" type="text" [(ngModel)]="user.FirstName" placeholder="Firstname" />
+    <form class="form" [formGroup]="userForm" (ngSubmit)="save()">
+      <div class="form-group row">
+        <label for="first-name" class="col-2 col-form-label">Firstname</label>
+        <div class="col-10">
+          <input id="first-name" class="form-control" type="text" formControlName="firstName" [(ngModel)]="user.firstName" placeholder="Firstname"
+            required />
+          <div *ngIf="formErrors.firstName" class="alert alert-danger">
+            {{ formErrors.firstName }}
+          </div>
+        </div>
+
       </div>
-    </div>
-    <div class="form-group row">
-      <label for="last-name" class="col-2 col-form-label">Lastname</label>
-      <div class="col-10">
-        <input id="last-name" class="form-control" type="text" [(ngModel)]="user.LastName" placeholder="Lastname" />
+      <div class="form-group row">
+        <label for="last-name" class="col-2 col-form-label">Lastname</label>
+        <div class="col-10">
+          <input id="last-name" class="form-control" type="text" formControlName="lastName" [(ngModel)]="user.lastName" placeholder="Lastname"
+            required />
+          <div *ngIf="formErrors.lastName" class="alert alert-danger">
+            {{ formErrors.lastName }}
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="form-group row">
-      <label for="user-name" class="col-2 col-form-label">Username</label>
-      <div class="col-10">
-        <input id="user-name" class="form-control" type="text" [(ngModel)]="user.UserName" placeholder="Username" />
+      <div class="form-group row">
+        <label for="user-name" class="col-2 col-form-label">Username</label>
+        <div class="col-10">
+          <input id="user-name" class="form-control" type="text" formControlName="userName" [(ngModel)]="user.userName" placeholder="Username"
+            required />
+          <div *ngIf="formErrors.userName" class="alert alert-danger">
+            {{ formErrors.userName }}
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="form-group row">
-      <label for="birthdate" class="col-2 col-form-label">Birthdate</label>
-      <div class="col-10 input-group">
-        <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="user.BirthDate" ngbDatepicker #d="ngbDatepicker">
-        <div class="input-group-addon" (click)="d.toggle()">
-          <i class="fa fa-6 fa-calendar" aria-hidden="true" style="width: 1.2rem; height: 1rem; cursor: pointer;"></i>
+      <div class="form-group row">
+        <label for="birthdate" class="col-2 col-form-label">Birthdate</label>
+        <div class="col-10 input-group">
+          <input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="birthDate" [(ngModel)]="user.birthDate" ngbDatepicker
+            required #d="ngbDatepicker">
+          <div class="input-group-addon" (click)="d.toggle()">
+            <i class="fa fa-6 fa-calendar" aria-hidden="true" style="width: 1.2rem; height: 1rem; cursor: pointer;"></i>
+          </div>
+          <div *ngIf="formErrors.birthDate" class="alert alert-danger">
+            {{ formErrors.birthDate }}
+          </div>
         </div>
       </div>
-    </div>
-    <div class="form-group row">
-      <label for="birthdate" class="col-2 col-form-label">Rights</label>
-      <div class="col-10">
-        <ng-select 
-          [items]="rights" 
-          [multiple]="true"
-           (selected)="selectedRight($event)" 
-           (removed)="removedRight($event)" 
-           [active]="user.Rights"
-          placeholder="No rights selected"></ng-select>
+      <div class="form-group row">
+        <label for="birthdate" class="col-2 col-form-label">Rights</label>
+        <div class="col-10">
+          <ng-select 
+              formControlName="rights" 
+              [items]="rights" 
+              [multiple]="true" 
+              (selected)="selectedRight($event)" 
+              (removed)="removedRight($event)"
+              [active]="user.rights" 
+            placeholder="No rights selected"></ng-select>
+        </div>
       </div>
-    </div>
+
+    </form>
   </div>
 
   <div *ngIf="!editMode">
@@ -51,7 +72,7 @@
       <label for="first-name" class="col-2 col-form-label">Firstname</label>
       <div class="col-10">
         <p class="form-control-static">
-          {{user.FirstName}}
+          {{user.firstName}}
         </p>
       </div>
     </div>
@@ -59,7 +80,7 @@
       <label for="last-name" class="col-2 col-form-label">Lastname</label>
       <div class="col-10">
         <p class="form-control-static">
-          {{user.LastName}}
+          {{user.lastName}}
         </p>
       </div>
     </div>
@@ -67,7 +88,7 @@
       <label for="user-name" class="col-2 col-form-label">Username</label>
       <div class="col-10">
         <p class="form-control-static">
-          {{user.UserName}}
+          {{user.userName}}
         </p>
       </div>
     </div>
@@ -75,7 +96,15 @@
       <label for="birthdate" class="col-2 col-form-label">Birthdate</label>
       <div class="col-10 input-group">
         <p class="form-control-static">
-          {{parserFormatter.format(user.BirthDate)}}
+          {{parserFormatter.format(user.birthDate)}}
+        </p>
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="rights" class="col-2 col-form-label">Rights</label>
+      <div class="col-10 input-group">
+        <p class="form-control-static">
+          {{user.rightsDisplay}}
         </p>
       </div>
     </div>

src/app/modules/users/user/user.component.ts

@@ -2,6 +2,7 @@ import 'rxjs/add/operator/switchMap';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
+import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
 import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 
 import { User } from '../models/user';
@@ -19,40 +20,113 @@ export class UserComponent implements OnInit {
   editMode: boolean;
   title: string;
   rights: any[];
+  userForm: FormGroup;
+  // = new FormGroup({
+  //   firstName: new FormControl(),
+  //   lastName: new FormControl(),
+  //   userName: new FormControl(),
+  //   birthDate: new FormControl(),
+  //   rights: new FormControl(),
+  //   });
 
   constructor(
     private userService: UserService,
     private rightService: RightService,
     private route: ActivatedRoute,
     private location: Location,
-    private parserFormatter: NgbDateParserFormatter
+    private parserFormatter: NgbDateParserFormatter,
+    private fb: FormBuilder
 
   ) { }
 
   selectedRight(selected): void {
-    this.user.Rights = this.user.Rights || [];
-    this.user.Rights.push(selected);
+    this.user.rights = this.user.rights || [];
+    this.user.rights.push(selected);
   }
 
   removedRight(selected): void {
-    this.user.Rights = this.user.Rights || [];
-    var found = this.user.Rights.find(u => u.id == selected.id);
-    var index = this.user.Rights.indexOf(found);
-    if(index > -1)
-      this.user.Rights.splice(index, 1);
+    this.user.rights = this.user.rights || [];
+    var found = this.user.rights.find(u => u.id == selected.id);
+    var index = this.user.rights.indexOf(found);
+    if (index > -1)
+      this.user.rights.splice(index, 1);
   }
 
-  ngOnInit(): void {
-    this.rightService.getRights().then(rights => this.rights = rights);
+  buildForm(): void {
+    this.userForm = this.fb.group({
+      'firstName': [this.user.firstName, [Validators.required]],
+      'lastName': [this.user.lastName, [Validators.required]],
+      'userName': [
+        this.user.userName, [
+          Validators.required,
+          Validators.minLength(4),
+          Validators.maxLength(24)
+        ]
+      ],
+      'birthDate': [this.user.birthDate, [Validators.required]],
+      'rights': [this.user.rights],
+    });
+    this.userForm.valueChanges
+      .subscribe(data => this.onValueChanged(data));
+
+    this.onValueChanged();
+  }
+  onValueChanged(data?: any) {
+    if (!this.userForm) { return; }
+    const form = this.userForm;
+
+    for (const field in this.formErrors) {
+      // clear previous error message (if any)
+      this.formErrors[field] = '';
+      const control = form.get(field);
+
+      if (control && control.dirty && !control.valid) {
+        const messages = this.validationMessages[field];
+        for (const key in control.errors) {
+          this.formErrors[field] += messages[key] + ' ';
+        }
+      }
+    }
+  }
+  formErrors = {
+    'firstName': '',
+    'lastName': '',
+    'userName': '',
+    'birthDate': '',
+    'rights': '',
+  };
 
+  validationMessages = {
+    'firstName': {
+      'required': 'Firstname is required.',
+    },
+    'lastName': {
+      'required': 'Lastname is required.',
+    },
+    'userName': {
+      'required': 'Username is required.',
+      'minlength': 'Username must be at least 4 characters long.',
+      'maxlength': 'Username cannot be more than 24 characters long.',
+    },
+    'birthDate': {
+      'required': 'Birth date is required.',
+    },
+    'rights': {}
+  };
+
+  ngOnInit(): void {
+    this.rightService.getRightsForCombo().then(rights => this.rights = rights);
     this.user = new User();
+    this.buildForm();
+
     this.editMode = true;
     this.route.params.subscribe(params => {
       if (params['id']) {
         this.userService.getUser(params['id'])
           .then(user => {
             this.user = user
-            this.user.Rights = this.user.Rights || [];
+            this.user.rights = this.user.rights || [];
+            this.user.rightsDisplay = this.user.rights.map(r => r.text).join(', ');
           });
       }
       if (this.location.path().indexOf('details') > -1) {
@@ -65,7 +139,7 @@ export class UserComponent implements OnInit {
         else {
           this.title = "Create";
           this.user = new User();
-          this.user.Rights = this.user.Rights || [];
+          this.user.rights = this.user.rights || [];
         }
       }
     });

src/app/modules/users/users.component.html

@@ -15,9 +15,9 @@
   <tbody>
     <tr *ngFor="let user of users">
       <th scope="row">{{user.id}}</th>
-      <td>{{user.FirstName}}</td>
-      <td>{{user.LastName}}</td>
-      <td>{{user.UserName}}</td>
+      <td>{{user.firstName}}</td>
+      <td>{{user.lastName}}</td>
+      <td>{{user.userName}}</td>
       <td>
         <button type="button" class="btn btn-sm btn-outline-info" (click)="details(user.id)">Details</button>
         <button type="button" class="btn btn-sm btn-outline-warning" (click)="edit(user.id)">Edit</button>

src/styles.less

@@ -4,9 +4,17 @@ ng-select{
         display: block!important;
     }
 }
-
+//Because of bootstrap 4 removed xs from the button sizes
 .btn-group-xs>.btn, .btn-xs {
     padding: .25rem .5rem;
     font-size: .875rem;
     border-radius: .2rem;
+}
+
+.ng-valid[required], .ng-valid.required  {
+  border-left: 5px solid #42A948; /* green */
+}
+
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442; /* red */
 }
\ No newline at end of file