Project

General

Profile

« Previous | Next » 

Revision 51561

Added by Myrto Koukouli about 6 years ago

added inline validation messages to create-update repository forms

View differences:

datasource-update-form.component.html
12 12 
      Basic information
13 13 
    </h4>
14 14 
  </div>
15 
  <form-inline [description]="softwarePlatformDesc">
15 
  <form-inline [description]="softwarePlatformDesc" [valid]="updateGroup.get('softwarePlatform').valid || !formSubmitted">
16 16 
    <select formControlName="softwarePlatform" class="form-control">
17 17 
<!--      <option value="" selected>[Other] (enter name below)</option> RESTORE AFTER getTypologies begins to work-->
18 18 
      <option *ngFor="let platform of typologies" value="{{ platform.value }}">{{ platform.name }}</option>
19 19 
    </select>
20 20 
  </form-inline>
21 
  <form-inline [description]="platformNameDesc">
21 
  <form-inline [description]="platformNameDesc" [valid]="updateGroup.get('platformName').valid || !formSubmitted">
22 22 
    <span *ngIf="updateGroup.get('platformName').touched && updateGroup.get('platformName').value"
23 23 
          class="help-block inline"
24 
          style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">This value will be used as the platform for your repository</span>
24 
          style="margin-top: 0px; margin-bottom: 0px; ">This value will be used as the platform for your repository</span>
25 25 
    <input formControlName="platformName" class="form-control" style="" type="text">
26 26 
  </form-inline>
27 27 
  <form-inline [description]="officialNameDesc" >
28 28 
    <input formControlName="officialName" class="form-control" style="" type="text">
29 29 
  </form-inline>
30 30 
  <div *ngIf="selectedRepo.datasourceType == 'journal'">
31 
    <form-inline [description]="issnDesc" [valid]="updateGroup.get('issn').valid">
31 
    <form-inline [description]="issnDesc" [valid]="updateGroup.get('issn').valid || !formSubmitted">
32 32 
      <span *ngIf="updateGroup.get('issn').invalid && updateGroup.get('issn').touched && updateGroup.get('issn').dirty"
33 
            class="help-block inline"
34 
            style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Issn needs to be of the form: "1111-1111"</span>
33 
            class="help-block inline uk-text-danger"
34 
            style="margin-top: 0px; margin-bottom: 0px; ">Issn needs to be of the form: "1111-1111"</span>
35 35 
      <input formControlName="issn" class="form-control" type="text" (focus)="updateGroup.get('issn').markAsUntouched()" (blur)="updateGroup.get('issn').updateValueAndValidity()">
36 36 
    </form-inline>
37 37 
    <form-inline [description]="eissnDesc" [valid]="updateGroup.get('eissn').valid">
38 38 
      <span *ngIf="updateGroup.get('eissn').invalid && updateGroup.get('eissn').touched && updateGroup.get('eissn').dirty"
39 
            class="help-block inline"
40 
            style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Eissn needs to be of the form: "1111-1111"</span>
39 
            class="help-block inline uk-text-danger"
40 
            style="margin-top: 0px; margin-bottom: 0px; ">Eissn needs to be of the form: "1111-1111"</span>
41 41 
      <input formControlName="eissn"class="form-control" type="text" (focus)="updateGroup.get('eissn').markAsUntouched()" (blur)="updateGroup.get('eissn').updateValueAndValidity()">
42 42 
    </form-inline>
43 43 
    <form-inline [description]="lissnDesc" [valid]="updateGroup.get('lissn').valid">
44 44 
      <span *ngIf="updateGroup.get('lissn').invalid && updateGroup.get('lissn').touched && updateGroup.get('lissn').dirty"
45 
            class="help-block inline"
46 
            style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Lissn needs to be of the form: "1111-1111"</span>
45 
            class="help-block inline uk-text-danger"
46 
            style="margin-top: 0px; margin-bottom: 0px;">Lissn needs to be of the form: "1111-1111"</span>
47 47 
      <input formControlName="lissn"class="form-control" type="text" (focus)="updateGroup.get('lissn').markAsUntouched()" (blur)="updateGroup.get('lissn').updateValueAndValidity()">
48 48 
    </form-inline>
49 49 
  </div>
50 
  <form-inline [description]="repoDescriptionDesc">
50 
  <form-inline [description]="repoDescriptionDesc" [valid]="updateGroup.get('repoDescription').valid || !formSubmitted">
51 51 
    <textarea formControlName="repoDescription" class="form-control"></textarea>
52 52 
  </form-inline>
53 
  <form-inline [description]="countryDesc">
53 
  <form-inline [description]="countryDesc" [valid]="updateGroup.get('country') || !formSubmitted">
54 54 
    <select formControlName="country" class="form-control">
55 55 
      <option value="">-- none selected --</option>
56 56 
      <option *ngFor="let country of countries" value="{{country.code}}" title="{{country.name}}">{{ country.name }}</option>
57 57 
    </select>
58 58 
  </form-inline>
59 
  <form-inline [description]="longtitudeDesc" [valid]="updateGroup.get('longtitude').valid">
59 
  <form-inline [description]="longtitudeDesc" [valid]="updateGroup.get('longtitude').valid || !formSubmitted">
60 60 
    <span *ngIf="updateGroup.get('longtitude').invalid && updateGroup.get('longtitude').touched && updateGroup.get('longtitude').dirty"
61 61 
          class="help-block inline"
62 
          style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Invalid Longtitude</span>
62 
          style="margin-top: 0px; margin-bottom: 0px; ">Invalid Longtitude</span>
63 63 
    <input formControlName="longtitude" class="form-control" type="number" step="0.05" (focus)="updateGroup.get('longtitude').markAsUntouched()" (blur)="updateGroup.get('longtitude').updateValueAndValidity()">
64 64 
  </form-inline>
65 
  <form-inline [description]="latitudeDesc" [valid]="updateGroup.get('latitude').valid">
65 
  <form-inline [description]="latitudeDesc" [valid]="updateGroup.get('latitude').valid || !formSubmitted">
66 66 
    <span *ngIf="updateGroup.get('latitude').invalid && updateGroup.get('latitude').touched && updateGroup.get('latitude').dirty"
67 67 
          class="help-block inline"
68 
          style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">Invalid Latitude</span>
68 
          style="margin-top: 0px; margin-bottom: 0px; ">Invalid Latitude</span>
69 69 
    <input formControlName="latitude" class="form-control" type="number" step="0.05" (focus)="updateGroup.get('latitude').markAsUntouched()" (blur)="updateGroup.get('latitude').updateValueAndValidity()">
70 70 
  </form-inline>
71 
  <form-inline [description]="websiteUrlDesc">
72 
    <input formControlName="websiteUrl" class="form-control" type="text">
71 
  <form-inline [description]="websiteUrlDesc" [valid]="updateGroup.get('websiteUrl').valid || !formSubmitted">
72 
    <span *ngIf="updateGroup.get('websiteUrl').invalid && updateGroup.get('websiteUrl').touched && updateGroup.get('websiteUrl').dirty"
73 
            class="help-block inline uk-text-danger"
74 
            style="margin-top: 0px; margin-bottom: 0px; ">You need to enter a valid url</span>
75 
    <input formControlName="websiteUrl" class="form-control" type="text"
76 
           (focus)="updateGroup.get('websiteUrl').markAsUntouched()"
77 
           (blur)="updateGroup.get('websiteUrl').updateValueAndValidity()">
73 78 
  </form-inline>
74 
  <form-inline [description]="institutionNameDesc">
79 
  <form-inline [description]="institutionNameDesc" [valid]="updateGroup.get('institutionName').valid || !formSubmitted">
75 80 
    <input formControlName="institutionName" class="form-control" type="text">
76 81 
  </form-inline>
77 82 
  <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"
78 83 
      uk-scrollspy-class="">Extra Information</h4>
79 
  <form-inline [description]="englishNameDesc" [valid]="updateGroup.get('englishName').valid">
84 
  <form-inline [description]="englishNameDesc" [valid]="updateGroup.get('englishName').valid || !formSubmitted">
80 85 
    <input formControlName="englishName" class="form-control" type="text">
81 86 
  </form-inline>
82 87 
  <form-inline [description]="logoUrlDesc" [valid]="updateGroup.get('logoUrl').valid">
83 
    <input formControlName="logoUrl" class="form-control" type="text">
88 
    <span *ngIf="updateGroup.get('logoUrl').invalid && updateGroup.get('logoUrl').touched && updateGroup.get('logoUrl').dirty"
89 
          class="help-block inline uk-text-danger"
90 
          style="margin-top: 0px; margin-bottom: 0px; ">The url you entered is not valid</span>
91 
    <input formControlName="logoUrl" class="form-control" type="text"
92 
           (focus)="updateGroup.get('logoUrl').markAsUntouched()"
93 
           (blur)="updateGroup.get('logoUrl').updateValueAndValidity()">
84 94 
    <div class="comment fontItalic">
85 95 
      Please make sure that the maximum size of the uploaded image is width=360px, height=240px
86 96 
    </div>
87 97 
  </form-inline>
88 
  <form-inline [description]="timezoneDesc" [valid]="updateGroup.get('timezone').valid">
98 
  <form-inline [description]="timezoneDesc" [valid]="updateGroup.get('timezone').valid || !formSubmitted">
89 99 
    <select formControlName="timezone" class="form-control">
90 100 
      <option value="">-- none selected --</option>
91 101 
      <option *ngFor="let timezone of timezones" value="{{ timezone.offset }}">{{ timezone.name }}</option>
92 102 
    </select>
93 103 
  </form-inline>
94 
  <form-inline [description]="datasourceTypeDesc" [valid]="updateGroup.get('datasourceType').valid">
104 
  <form-inline [description]="datasourceTypeDesc" [valid]="updateGroup.get('datasourceType').valid || !formSubmitted">
95 105 
    <select formControlName="datasourceType" class="form-control">
96 106 
      <option value="">-- none selected --</option>
97 107 
      <option *ngFor="let key of classCodes" value="{{key}}">{{ datasourceClasses[key] }}</option>
......
99 109 
  </form-inline>
100 110 
  <h4 class="uk-h4 uk-text-primary uk-scrollspy-inview uk-animation-slide-top-medium"
101 111 
      uk-scrollspy-class="">Administrator & contact information</h4>
102 
  <form-inline [description]="adminEmailDesc" [valid]="updateGroup.get('adminEmail').valid">
112 
  <form-inline [description]="adminEmailDesc" [valid]="updateGroup.get('adminEmail').valid || !formSubmitted">
103 113 
    <span *ngIf="updateGroup.get('adminEmail').invalid && updateGroup.get('adminEmail').touched && updateGroup.get('adminEmail').dirty"
104 114 
          class="help-block inline"
105 
          style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">You need to enter a valid email address</span>
115 
          style="margin-top: 0px; margin-bottom: 0px; ">You need to enter a valid email address</span>
106 116 
    <input formControlName="adminEmail" class="form-control" type="text" (focus)="updateGroup.get('adminEmail').markAsUntouched()" (blur)="updateGroup.get('adminEmail').updateValueAndValidity()">
107 117 
  </form-inline>
108 118 
  <div *ngIf="showButton" class="form-group">

Also available in: Unified diff