Form validation for VPCS components

src/app/app-routing.module.ts

@@ -29,7 +29,8 @@ const routes: Routes = [
       { path: 'server/:server_id/projects', component: ProjectsComponent },
       { path: 'settings', component: SettingsComponent },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },
-      { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
+      // temporary disabled
+      // { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
       // temporary disabled
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },

src/app/components/preferences/preferences.component.html

@@ -7,11 +7,6 @@
     <div class="default-content">
         <div class="example-container mat-elevation-z8">
             <mat-nav-list>
-                <mat-list-item>
-                    <button mat-button routerLink="/server/{{serverId}}/preferences/general">
-                        General
-                    </button>
-                </mat-list-item>
                 <mat-list-item>
                     <button mat-button routerLink="/server/{{serverId}}/preferences/vpcs/templates">
                         VPCS

src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.html

@@ -5,35 +5,53 @@
         </div>
     </div>
     <div class="default-content" *ngIf="vpcsTemplate">
-        <mat-form-field class="row">
+        <form [formGroup]="inputForm">
-            <input matInput type="text" [(ngModel)]="vpcsTemplate.name" placeholder="Template name">
+            <mat-form-field class="row">
-        </mat-form-field>
+                <input 
-        <mat-form-field class="row">
+                    matInput type="text" 
-            <input matInput type="text" [(ngModel)]="vpcsTemplate.default_name_format" placeholder="Default name format">
+                    [(ngModel)]="vpcsTemplate.name" 
-        </mat-form-field>
+                    formControlName="templateName"
-        <mat-form-field class="row">
+                    placeholder="Template name">
-            <input matInput type="text" [(ngModel)]="vpcsTemplate.base_script_file" placeholder="Base script file">
+            </mat-form-field>
-        </mat-form-field>
+            <mat-form-field class="row">
-        <mat-form-field class="row">
+                <input 
-            <input matInput type="text" [(ngModel)]="vpcsTemplate.symbol" placeholder="Symbol">
+                    matInput type="text" 
-        </mat-form-field>
+                    [(ngModel)]="vpcsTemplate.default_name_format" 
-        <mat-form-field class="row">
+                    formControlName="defaultName"
-            <mat-select placeholder="Category" [(ngModel)]="vpcsTemplate.category">
+                    placeholder="Default name format">
-                <mat-option *ngFor="let category of categories" [value]="category[1]">
+            </mat-form-field>
-                    {{category[0]}}
+            <mat-form-field class="row">
-                </mat-option>
+                <input 
-            </mat-select>
+                    matInput type="text" 
-        </mat-form-field>
+                    [(ngModel)]="vpcsTemplate.base_script_file" 
-        <mat-form-field class="select">
+                    formControlName="scriptFile"
-            <mat-select placeholder="Console type" [(ngModel)]="vpcsTemplate.console_type">
+                    placeholder="Base script file">
-                <mat-option *ngFor="let type of consoleTypes" [value]="type">
+            </mat-form-field>
-                    {{type}}
+            <mat-form-field class="row">
-                </mat-option>
+                <input 
-            </mat-select>
+                    matInput type="text" 
-        </mat-form-field>
+                    [(ngModel)]="vpcsTemplate.symbol" 
-        <mat-checkbox [(ngModel)]="vpcsTemplate.console_auto_start">
+                    formControlName="symbol"
-            Auto start console
+                    placeholder="Symbol">
-        </mat-checkbox>
+            </mat-form-field>
+            <mat-form-field class="row">
+                <mat-select placeholder="Category" [ngModelOptions]="{standalone: true}" [(ngModel)]="vpcsTemplate.category">
+                    <mat-option *ngFor="let category of categories" [value]="category[1]">
+                        {{category[0]}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field class="select">
+                <mat-select placeholder="Console type" [ngModelOptions]="{standalone: true}" [(ngModel)]="vpcsTemplate.console_type">
+                    <mat-option *ngFor="let type of consoleTypes" [value]="type">
+                        {{type}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-checkbox [ngModelOptions]="{standalone: true}" [(ngModel)]="vpcsTemplate.console_auto_start">
+                Auto start console
+            </mat-checkbox>
+        </form>
         <div class="buttons-bar">
             <button mat-raised-button color="primary" (click)="onSave()">Save</button><br/>
         </div>

src/app/components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { ServerService } from '../../../../services/server.service';
 import { Server } from '../../../../models/server';
 import { ToasterService } from '../../../../services/toaster.service';
 import { VpcsService } from '../../../../services/vpcs.service';
 import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 
 
 @Component({
@@ -15,6 +16,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 export class VpcsTemplateDetailsComponent implements OnInit {
     server: Server;
     vpcsTemplate: VpcsTemplate;
+    inputForm: FormGroup;
 
     consoleTypes: string[] = ['telnet', 'none'];
     categories = [["Default", "guest"],
@@ -27,8 +29,16 @@ export class VpcsTemplateDetailsComponent implements OnInit {
         private route: ActivatedRoute,
         private serverService: ServerService,
         private vpcsService: VpcsService,
-        private toasterService: ToasterService
+        private toasterService: ToasterService,
-    ) {}
+        private formBuilder: FormBuilder
+    ) {
+        this.inputForm = this.formBuilder.group({
+            templateName: new FormControl('', Validators.required),
+            defaultName: new FormControl('', Validators.required),
+            scriptFile: new FormControl('', Validators.required),
+            symbol: new FormControl('', Validators.required)
+        });
+    }
 
     ngOnInit() {
         const server_id = this.route.snapshot.paramMap.get("server_id");
@@ -43,8 +53,12 @@ export class VpcsTemplateDetailsComponent implements OnInit {
     }
 
     onSave() {
-        this.vpcsService.saveTemplate(this.server, this.vpcsTemplate).subscribe((vpcsTemaple: VpcsTemplate) => {
+        if( this.inputForm.invalid) {
-            this.toasterService.success("Changes saved");
+            this.toasterService.error(`Fill all required fields`);
-        });
+        } else {
+            this.vpcsService.saveTemplate(this.server, this.vpcsTemplate).subscribe((vpcsTemaple: VpcsTemplate) => {
+                this.toasterService.success("Changes saved");
+            });
+        }
     }
 }