Local and Remote server adding validation, Ref. #295

src/app/components/servers/add-server-dialog/add-server-dialog.component.html

@@ -1,34 +1,47 @@
 <h1 mat-dialog-title>Add server</h1>
+<form [formGroup]="serverForm">
 <div mat-dialog-content>
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.name" placeholder="Name" /> </mat-form-field>
+    <mat-form-field>
+      <input matInput tabindex="1" formControlName="name" placeholder="Name" />
+      <mat-error *ngIf="serverForm.get('name').hasError('required')">You must enter a value</mat-error>
+    </mat-form-field>
 
    <mat-form-field>
-    <mat-select placeholder="Location" [(value)]="server.location">
+      <mat-select placeholder="Location" formControlName="location" >
         <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
       </mat-select>
     </mat-form-field>
 
-  <mat-form-field *ngIf="server.location === 'local'">
+    <mat-form-field *ngIf="serverForm.get('location').value === 'local'">
-    <input matInput tabindex="1" [(ngModel)]="server.path" placeholder="Local server path" />
+      <input matInput tabindex="1" formControlName="path" placeholder="Local server path" />
     </mat-form-field>
 
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.host" placeholder="Host" /> </mat-form-field>
+    <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.port" placeholder="Port" /> </mat-form-field>
+      <input matInput tabindex="1" formControlName="host" placeholder="Host" />
+    </mat-form-field>
 
-  <mat-form-field>
+    <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
-    <mat-select placeholder="Authorization" [(value)]="server.authorization">
+      <input matInput tabindex="1" formControlName="port" placeholder="Port" />
+    </mat-form-field>
+
+    <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
+      <mat-select placeholder="Authorization" formControlName="authorization" >
         <mat-option *ngFor="let auth of authorizations" [value]="auth.key"> {{ auth.name }} </mat-option>
       </mat-select>
     </mat-form-field>
 
-  <mat-form-field *ngIf="server.authorization === 'basic'">
+    <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
-    <input matInput tabindex="1" [(ngModel)]="server.login" placeholder="Login" />
+      <input matInput tabindex="1" formControlName="login" placeholder="Login" />
     </mat-form-field>
-  <mat-form-field *ngIf="server.authorization === 'basic'">
+
-    <input matInput tabindex="1" [(ngModel)]="server.password" placeholder="Password" />
+    <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
+      <input matInput tabindex="1" formControlName="password" placeholder="Password" />
     </mat-form-field>
+    
   </div>
   <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
     <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
   </div>
+</form>
+  

src/app/components/servers/add-server-dialog/add-server-dialog.component.ts

@@ -2,6 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { Server } from '../../../models/server';
 import { ElectronService } from 'ngx-electron';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
@@ -9,11 +10,20 @@ import { ElectronService } from 'ngx-electron';
   templateUrl: 'add-server-dialog.component.html'
 })
 export class AddServerDialogComponent implements OnInit {
-  server: Server = new Server();
-
   authorizations = [{ key: 'none', name: 'No authorization' }, { key: 'basic', name: 'Basic authorization' }];
   locations = [];
 
+  serverForm = new FormGroup({
+    'name': new FormControl('', [ Validators.required ]),
+    'location': new FormControl(''),
+    'path': new FormControl(''),
+    'host': new FormControl(''),
+    'port': new FormControl(''),
+    'authorization': new FormControl('none'),
+    'login': new FormControl(''),
+    'password': new FormControl('')
+  });
+
   constructor(
     public dialogRef: MatDialogRef<AddServerDialogComponent>,
     private electronService: ElectronService,
@@ -45,17 +55,68 @@ export class AddServerDialogComponent implements OnInit {
 
   async ngOnInit() {
     this.locations = this.getLocations();
-    this.server.authorization = 'none';
+
-    this.server.location = this.getDefaultLocation();
+    const defaultLocalServerPath = await this.getDefaultLocalServerPath();
-    this.server.path = await this.getDefaultLocalServerPath();
+
+    this.serverForm.get('location').valueChanges.subscribe((location: string) => {
+      const pathControl = this.serverForm.get('path');
+      const portControl = this.serverForm.get('port');
+      const hostControl = this.serverForm.get('host');
+
+      if(location === 'local') {
+        pathControl.setValue(defaultLocalServerPath);
+        pathControl.setValidators([Validators.required]);
+
+        portControl.clearValidators();
+        hostControl.clearValidators();
+      }
+      else {
+        pathControl.setValue('');
+        pathControl.clearValidators();
+
+        portControl.setValidators([Validators.required, Validators.min(0)]);
+        hostControl.setValidators([Validators.required]);
+      }
+
+      [pathControl, portControl, hostControl].forEach((control) => {
+        control.updateValueAndValidity({
+          onlySelf: true
+        });
+      })
+    });
+    
+
+    this.serverForm.get('authorization').valueChanges.subscribe((authorization: string) => {
+      const loginControl = this.serverForm.get('login');
+      const passwordControl = this.serverForm.get('password');
+
+      if(authorization === 'none') {
+        loginControl.clearValidators();
+        passwordControl.clearValidators();
+      }
+      else {
+        loginControl.setValidators([Validators.required]);
+        passwordControl.setValidators([Validators.required]);
+      }
+
+      [loginControl, passwordControl].forEach((control) => {
+        control.updateValueAndValidity({
+          onlySelf: true
+        });
+      })
+    });
+
+    this.serverForm.get('location').setValue(this.getDefaultLocation());
+    this.serverForm.get('authorization').setValue('none');
   }
 
   onAddClick(): void {
-    // clear path if not local server
+    if(!this.serverForm.valid) {
-    if(this.server.location !== 'local') {
+      return;
-      this.server.path = null;
     }
-    this.dialogRef.close(this.server);
+
+    const server: Server = Object.assign({}, this.serverForm.value);
+    this.dialogRef.close(server);
   }
 
   onNoClick(): void {