end of workshop

src/app/crossValidator.service.ts

@@ -19,4 +19,16 @@ export class CrossValidator {
       return error;
     };
   }
+
+  public crossValidate() {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!(control instanceof FormGroup)) {
+        return null;
+      }
+
+      const contactType = control.get('contactType')?.value;
+
+      if (contactType == "None") return null;
+    }
+  }
 }

src/app/new-hotel/new-hotel.component.html

@@ -5,24 +5,55 @@
 
   <label for="name">Name</label>
   <div class="text-red-500" *ngIf="errorMessages['name']">{{ errorMessages['name'] }}</div>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name" formControlName="name">
+  <input type="text" class="border-red-500"
+    [class.border-8]='hotelForm.get("name")?.invalid && hotelForm.get("name")?.touched' id="name"
+    formControlName="name">
   <label for="description">Description</label>
   <div class="text-red-500" *ngIf="errorMessages['description']">{{ errorMessages['description'] }}</div>
-  <input type="text" class="border-red-500" [class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description" formControlName="description">
+  <input type="text" class="border-red-500"
+    [class.border-8]='hotelForm.get("description")?.invalid && hotelForm.get("description")?.touched' id="description"
+    formControlName="description">
   <label for="imageUrl">Image</label>
   <div class="text-red-500" *ngIf="errorMessages['imageUrl']">{{ errorMessages['imageUrl'] }}</div>
-  <input type="url" class="border-red-500" [class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl" formControlName="imageUrl">
+  <input type="url" class="border-red-500"
+    [class.border-8]='hotelForm.get("imageUel")?.invalid && hotelForm.get("imageUrl")?.touched' id="imageUrl"
+    formControlName="imageUrl">
   <label for="price">Price</label>
   <div class="text-red-500" *ngIf="errorMessages['price']">{{ errorMessages['price'] }}</div>
-  <input type="number" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price" formControlName="price">
+  <input type="number" class="border-red-500" [class.border-8]='hotelForm.get("price")?.invalid' id="price"
+    formControlName="price">
   <label for="rating">Rating</label>
   <div class="text-red-500" *ngIf="errorMessages['rating']">{{ errorMessages['rating'] }}</div>
-  <input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating" formControlName="rating">
+  <input type="rating" class="border-red-500" [class.border-8]='hotelForm.get("rating")?.invalid' id="rating"
+    formControlName="rating">
   <button class="submit-button" (click)="addTag()">Add Tag</button>
   @for (tag of getTags().controls; track tag) {
-    <input type="tag" class="border-red-500" [class.border-8]='hotelForm.get("tag")?.invalid' id="tag" formControlName="tag">
+  <input type="tag" class="border-red-500" [class.border-8]='hotelForm.get("tag")?.invalid' id="tag"
-    <button (click)="deleteTag(tag)" class="delete-button">delete</button>
+    formControlName="tag">
+  <button (click)="deleteTag(tag)" class="delete-button">delete</button>
   }
+
+  <input type="radio" value='None' formControlName="contactType">None
+  <input type="radio" value='Email' formControlName="contactType">Email
+  <input type="radio" value='SMS' formControlName="contactType">SMS
+
+  @if (hotelForm.get("contactType")?.value == "Email") {
+  <div class="mt-3">
+    <label for="email">Email</label>
+    <input type="email" formControlName="email" id="email">
+    <label for="emailConfirmation">Email Confirmation</label>
+    <input type="email" formControlName="emailConfirmation" id="emailConfirmation">
+  </div>
+  }
+  @if (hotelForm.get("contactType")?.value == "SMS") {
+  <div class="mt-3">
+    <label for="phone">Phone Number</label>
+    <input type="tel" formControlName="phone" id="phone">
+    <label for="phoneConfirmation">Phone Number Confirmation</label>
+    <input type="tel" formControlName="phoneConfirmation" id="phoneConfirmation">
+  </div>
+  }
+
   <button class="submit-button" (click)="submit()" [disabled]="!hotelForm.valid" type="submit">Submit</button>
   <a routerLink="/" class="delete-button">Cancel</a>
 </form>

src/app/new-hotel/new-hotel.component.ts

@@ -67,10 +67,20 @@ export class NewHotelComponent {
       price: new FormControl(0, Validators.required),
       imageUrl: new FormControl("", Validators.required),
       rating: new FormControl(0, Validators.required),
+      contactType: new FormControl('None'),
+      email: new FormControl(''),
+      emailConfirmation: new FormControl(''),
+      phone: new FormControl(''),
+      phoneConfirmation: new FormControl(''),
       tags: new FormArray(tags)
     }, { validators: new CrossValidator().onlyAllowNameAndDescriptionSame() })
 
     this.hotelForm.valueChanges.subscribe(() => this.updateErrorMessages());
+    this.hotelForm.valueChanges.subscribe(() => this.formUpdated());
+  }
+
+  formUpdated() {
+    console.log(this.hotelForm.get("contactType")?.value);
   }
 
   getTags() {