fix(add-cat): correct valid aria

- aria-describedby should only be added when there are errors.

src/app/containers/add-cat/add-cat.component.html

@@ -33,14 +33,14 @@ <h3>There are {{getErrorCount()}} errors in this form</h3>
       <label for="name">Cat Name</label><br>
       <input type="text" placeholder="Whiskers"
              formControlName="name" id="name" required
-             aria-describedby="name-error"
+             [attr.aria-describedby]="getInputDescribedBy('name')"
              [attr.aria-invalid]="catForm.controls['name'].hasError('required')">
     </li>
     <li>
       <label for="breed">Cat Breed</label><br>
       <input type="text" placeholder="Persian Cat"
              formControlName="breed" id="breed" required
-             aria-describedby="breed-error"
+             [attr.aria-describedby]="getInputDescribedBy('breed')"
              [attr.aria-invalid]="catForm.controls['breed'].hasError('required')">
     </li>
     <li>
@@ -57,7 +57,7 @@ <h3>There are {{getErrorCount()}} errors in this form</h3>
       <label for="description">Description</label><br>
       <textarea placeholder="She's soft and sweet"
                 formControlName="description" id="description" required
-                aria-describedby="description-error"
+                [attr.aria-describedby]="getInputDescribedBy('description')"
                 [attr.aria-invalid]="catForm.controls['description'].hasError('required')"></textarea>
     </li>
   </ul>

src/app/containers/add-cat/add-cat.component.ts

@@ -68,4 +68,19 @@ export class AddCatComponent implements OnInit {
     }
     return errorCount;
   }
+
+  // We need this method so that we can conditionally add the `aria-describedby`
+  // attribute if there's an input error.
+  getInputDescribedBy(inputName: string): string|null {
+    // We don't show errors until user attempts to fill out the form.
+    if (!this.isSubmitDirty) return null;
+    // If you have multiple validations on the input, you'll have to check each
+    // here.
+    if (this.catForm.controls[inputName].hasError('required')) {
+      return `${inputName}-error`;
+    }
+    // Returning null means the `aria-describedby` attribute wont be added
+    // to the element.
+    return null;
+  }
 }