#50 improve required field look and feel

Author: daros10

src/app/modules/activities-management/components/create-activity/create-activity.component.html

@@ -3,14 +3,36 @@
     <h1 class="card-title">Activity</h1>
     <div class="form-group">
       <label for="name">Name:</label>
-      <input class="form-control" id="name" type="text" formControlName="name" required>
-      <div class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
-        Activity name is required.</div>
+      <input
+        class="form-control"
+        id="name"
+        type="text"
+        formControlName="name"
+        [class.is-invalid]="name.invalid && name.touched"
+        required
+      />
+      <div class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+        Activity name is required.
+      </div>
     </div>
 
     <div class="form-group">
       <label for="details">Description:</label>
-      <textarea class="form-control" rows="3" id="description" type="text" formControlName="description"></textarea>
+      <textarea
+        class="form-control"
+        rows="3"
+        id="description"
+        type="text"
+        formControlName="description"
+        [class.is-invalid]="description.invalid && description.touched"
+        required
+      ></textarea>
+      <p
+        class="text-danger"
+        *ngIf="(description.dirty || description.touched) && description.invalid && description.errors.required"
+      >
+        Details activity is required.
+      </p>
     </div>
 
     <div class="btn-toolbar" role="toolbar">
@@ -19,4 +41,4 @@ <h1 class="card-title">Activity</h1>
       </div>
     </div>
   </form>
-</div>
+</div>

src/app/modules/activities-management/components/create-activity/create-activity.component.ts

@@ -5,10 +5,9 @@ import { Activity } from '../../../shared/models';
 @Component({
   selector: 'app-create-activity',
   templateUrl: './create-activity.component.html',
-  styleUrls: ['./create-activity.component.scss']
+  styleUrls: ['./create-activity.component.scss'],
 })
 export class CreateActivityComponent {
-
   activityForm: FormGroup;
 
   @Input()
@@ -17,7 +16,7 @@ export class CreateActivityComponent {
   constructor(private formBuilder: FormBuilder) {
     this.activityForm = this.formBuilder.group({
       name: ['', Validators.required],
-      description: ['']
+      description: ['', Validators.required],
     });
   }
 
@@ -35,5 +34,4 @@ export class CreateActivityComponent {
   get description() {
     return this.activityForm.get('description');
   }
-
 }

src/app/modules/project-management/components/create-project/create-project.component.html

@@ -4,26 +4,52 @@ <h1 class="card-title">Project</h1>
 
     <div class="form-group">
       <label for="name">Name:</label>
-      <input class="form-control" id="name" type="text" formControlName="name" required>
-      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">Name Project is required.</p>
+      <input
+        class="form-control"
+        id="name"
+        type="text"
+        formControlName="name"
+        [class.is-invalid]="name.invalid && name.touched"
+        required
+      />
+      <p class="text-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">
+        Name Project is required.
+      </p>
     </div>
 
     <div class="form-group">
       <label for="details">Details:</label>
-      <textarea class="form-control" rows="3" id="details" type="text" formControlName="details" required></textarea>
-      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is required.</p>
+      <textarea
+        class="form-control"
+        rows="3"
+        id="details"
+        type="text"
+        formControlName="details"
+        [class.is-invalid]="details.invalid && details.touched"
+        required
+      ></textarea>
+      <p class="text-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">
+        Details Project is required.
+      </p>
     </div>
 
     <div class="form-group">
       <label for="status">Status:</label>
       <select class="form-control" formControlName="status">
-        <option *ngFor="let status of projectStatus" [value]="status">{{status}}</option>
+        <option
+          *ngFor="let status of projectStatus"
+          [class.is-invalid]="status.invalid && status.touched"
+          [value]="status"
+          >{{ status }}</option
+        >
       </select>
-      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.</p>
+      <p class="text-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">
+        Status Project is required.
+      </p>
     </div>
 
     <div class="form-group form-check" [hidden]="!projectToEdit">
-      <input type="checkbox" class="form-check-input" id="completedProject" formControlName="completed">
+      <input type="checkbox" class="form-check-input" id="completedProject" formControlName="completed" />
       <label class="form-check-label" for="completedProject">Completed project</label>
     </div>
     <div class="btn-toolbar" role="toolbar">