Validation

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, DoCheck, SimpleChanges } from '@angular/core';
+import { Component, DoCheck } from '@angular/core';
 import {IMeetup} from './models/meetup';
 import {MeetupFactory} from "./models/meetupFactory";
 
@@ -22,8 +22,7 @@ export class AppComponent implements  DoCheck {
         session.startTime = new Date(session.startTime);
         session.endTime = new Date(session.endTime);
       });
-    }
-    else {
+    } else {
       this.meetup = MeetupFactory.createMeetup();
     }
   }

src/app/editor/editor.component.html

@@ -1,3 +1,4 @@
+<form>
 <div class="row">
   <div class="col-sm-9">
     <app-general-editor *ngIf="state == EditorState.General"
@@ -42,3 +43,4 @@
     </ul>
   </div>
 </div>
+</form>

src/app/general-editor/general-editor.component.html

@@ -31,9 +31,12 @@ <h2>Общая информация</h2>
     <legend>Друзья:</legend>
 
     <fieldset *ngFor="let friend of meetup.friends; index as index; trackBy: trackByIndex">
-      <legend>{{index + 1}}</legend>
-
-      <button class="btn btn-dark ml-2 pull-right" (click)="removeFriend(friend)" [disabled]="meetup.friends.length <= 1"><i class="fa fa-trash"></i> Удалить</button>
+      <legend class="right">
+        <button class="btn btn-dark ml-2 pull-right"
+                title="Удалить"
+                (click)="removeFriend(friend)"
+                [disabled]="meetup.friends.length <= 1"><i class="fa fa-trash"></i></button>
+      </legend>
 
       <app-friend-editor [friend]="friend">
       </app-friend-editor>

src/app/general-editor/general-editor.component.ts

@@ -23,8 +23,10 @@ export class GeneralEditorComponent {
   }
 
   removeFriend(friend: IFriend) {
-    const index = this.meetup.friends.findIndex(item => item === friend);
-    this.meetup.friends.splice(index, 1);
+    if (window.confirm('Удалить? Вы уверены?')) {
+      const index = this.meetup.friends.findIndex(item => item === friend);
+      this.meetup.friends.splice(index, 1);
+    }
   }
 
   trackByIndex(index: number): number {

src/app/id-editor/id-editor.component.html

@@ -4,8 +4,8 @@
     <div class="input-group">
       <input type="text" class="form-control" required
              id="{{id}}"
-             [value]="value"
-             (input)="valueChange.emit($event.target.value)"/>
+             [ngModel]="value"
+             (ngModelChange)="valueChange.emit($event)"/>
       <div class="input-group-append button" (click)="toggle.emit()">
         <div class="input-group-text">
           <i  *ngIf="add" title="{{buttonTitle}}" class="fa fa-plus-circle"></i>

src/app/input-editor/input-editor.component.html

@@ -1,17 +1,26 @@
 <div class="form-group row">
   <label [for]="id" class="col-sm-3 col-form-label">{{label}}:</label>
   <div class="col-sm-9">
-    <input *ngIf="type != InputType.TextArea"
+    <input *ngIf="type != InputType.TextArea && type != InputType.Url"
            [type]="InputType[type]"
            class="form-control"
            [id]="id"
            [ngModel]="value"
            (ngModelChange)="valueChange.emit($event)"
-           pattern="^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?"
+           [required]="required"
            />
-
+    <input *ngIf="type == InputType.Url"
+           type="url"
+           class="form-control"
+           [id]="id"
+           [ngModel]="value"
+           (ngModelChange)="valueChange.emit($event)"
+           [required]="required"
+           pattern="^(https?)://[^\s/$.?#].[^\s]*$"
+    />
     <textarea *ngIf="type == InputType.TextArea"
-               class="form-control"
+              class="form-control"
+              [required]="required"
               [id]="id"
               [ngModel]="value"
               (ngModelChange)="valueChange.emit($event)"></textarea>

src/app/input-editor/input-editor.component.ts

@@ -32,6 +32,9 @@ export class InputEditorComponent  {
   @Input()
   public label = '';
 
+  @Input()
+  public required = true;
+
   @Output()
   valueChange = new EventEmitter<any>();
 

src/app/session-editor/session-editor.component.html

@@ -7,14 +7,17 @@ <h2>Доклад</h2>
   <div class="col-sm-9 ">
     <div class="form-inline">
       <input type="date" class="form-control" required id="date"
+             [required]="true"
              [ngModel]="session.startTime  | date:'yyyy-MM-dd'"
              (ngModelChange)="setDates($event)"/>
       <label class="mx-2" for="startTime" >От:</label>
       <input type="time" class="form-control" required id="startTime" #startTimeInput
+             [required]="true"
              [ngModel]="session.startTime | date:'HH:mm'"
              (ngModelChange)="setTimeFor(session.startTime, startTimeInput.valueAsDate) "/>
       <label class="mx-2" for="endTime" >До:</label>
       <input type="time" class="form-control" required id="endTime" #endTimeInput
+             [required]="true"
              [ngModel]="session.endTime | date:'HH:mm'"
              (ngModelChange)="setTimeFor(session.endTime, endTimeInput.valueAsDate) "/>
     </div>
@@ -28,8 +31,8 @@ <h2>Доклад</h2>
                   [type]="InputType.TextArea"></app-input-editor>
 
 <div class="form-group row" *ngFor="let seeAlso of session.talk.seeAlsoTalkIds; index as index">
-  <label [for]="'seeAlsoTalkId' + index" class="col-sm-2 col-form-label">Другие части:</label>
-  <div class="col-sm-10">
+  <label [for]="'seeAlsoTalkId' + index" class="col-sm-3 col-form-label">Другие части:</label>
+  <div class="col-sm-9">
     <div class="input-group">
       <input type="text" class="form-control" [id]="'seeAlsoTalkId' + index" [(ngModel)]="seeAlso.value"/>
       <div class="input-group-append button" *ngIf="session.talk.seeAlsoTalkIds.length > 1">
@@ -47,9 +50,9 @@ <h2>Доклад</h2>
   </div>
 </div>
 
-<app-input-editor [type]="InputType.Url" label="Код" [(value)]="session.talk.codeUrl" ></app-input-editor>
-<app-input-editor [type]="InputType.Url" label="Слайды" [(value)]="session.talk.slidesUrl" ></app-input-editor>
-<app-input-editor [type]="InputType.Url" label="Видео" [(value)]="session.talk.videoUrl" ></app-input-editor>
+<app-input-editor [type]="InputType.Url" label="Код" [(value)]="session.talk.codeUrl" required="false"></app-input-editor>
+<app-input-editor [type]="InputType.Url" label="Слайды" [(value)]="session.talk.slidesUrl" required="false"></app-input-editor>
+<app-input-editor [type]="InputType.Url" label="Видео" [(value)]="session.talk.videoUrl" required="false"></app-input-editor>
 
 <h2>Спикеры</h2>
 <app-speaker-list-editor

src/app/speaker-editor/speaker-editor.component.html

@@ -33,24 +33,28 @@
 
 <app-input-editor *ngIf="speaker.isNew"
                   label="Блог (url)"
+                  required="false"
                   [type]="InputType.Url"
                   [(value)]="speaker.blogUrl" >
 </app-input-editor>
 
 <app-input-editor *ngIf="speaker.isNew"
                   label="Контакты (url)"
+                  required="false"
                   [type]="InputType.Url"
                   [(value)]="speaker.contactsUrl" >
 </app-input-editor>
 
 <app-input-editor *ngIf="speaker.isNew"
                   label="Twitter (url)"
+                  required="false"
                   [type]="InputType.Url"
                   [(value)]="speaker.twitterUrl" >
 </app-input-editor>
 
 <app-input-editor *ngIf="speaker.isNew"
                   label="Хабр (url)"
+                  required="false"
                   [type]="InputType.Url"
                   [(value)]="speaker.habrUrl" >
 </app-input-editor>

src/app/speaker-list-editor/speaker-list-editor.component.html

@@ -1,10 +1,11 @@
 <fieldset *ngFor="let speaker of talk.speakers; index as index; trackBy: trackById">
-  <legend>{{index + 1}}</legend>
-
-  <button class="btn btn-dark ml-2 pull-right"
-          (click)="removeSpeker(index)"
-          [disabled]="talk.speakers.length <= 1"><i class="fa fa-trash"></i> Удалить
-  </button>
+  <legend class="right">
+    <button class="btn btn-dark ml-2 pull-right"
+            title="Удалить"
+            (click)="removeSpeker(index)"
+            [disabled]="talk.speakers.length <= 1"><i class="fa fa-trash"></i>
+    </button>
+  </legend>
 
   <app-speaker-editor
           [speaker]="speaker">

src/app/speaker-list-editor/speaker-list-editor.component.ts

@@ -21,8 +21,10 @@ export class SpeakerListEditorComponent {
   }
 
   removeSpeker(speaker: ISpeaker) {
-    const index = this.talk.speakers.findIndex(item => item === speaker);
-    this.talk.speakers.splice(index, 1);
+    if (window.confirm('Удалить? Вы уверены?')) {
+      const index = this.talk.speakers.findIndex(item => item === speaker);
+      this.talk.speakers.splice(index, 1);
+    }
   }
 
   trackById(index: number, speakerId: string): number {

src/app/xml-encode.pipe.spec.ts

@@ -2,7 +2,7 @@ import { XmlEncodePipe } from './xml-encode.pipe';
 
 describe('XmlEncodePipe', () => {
   it('create an instance', () => {
-    const pipe = new XmlEncodePipe();
+    const pipe = new XmlEncodePipe(null);
     expect(pipe).toBeTruthy();
   });
 });

src/styles.scss

@@ -17,6 +17,30 @@ legend {
   margin-right: 1em;
 }
 
+legend.right{
+  text-align: right;
+  margin-right: 1em;
+}
+
 .button{
   cursor: pointer;
 }
+
+input.form-control, select.form-control, textarea.form-control {
+  border-left: 5px solid #b4b4b4; /* grey */
+}
+
+.ng-valid[required], .ng-valid.required {
+  border-left: 5px solid #42A948; /* green */
+}
+
+/* not empty input with pattern */
+.ng-valid[pattern]:not([ng-reflect-model='']) {
+  border-left: 5px solid #42A948; /* green */
+}
+
+
+.ng-invalid:not(form)  {
+  border-left: 5px solid #a94442; /* red */
+}
+