Fixes 4th iteration (#12)

Author: d-koppenhagen

src/app/form-field-info/form-field-info.html

@@ -1,4 +1,4 @@
-@if(messages()) {
+@if(messages().length) {
 <ul>
   @for (message of messages(); track $index) {
   <li [class]="message.cssClass">

src/app/form-field-info/form-field-info.ts

@@ -17,7 +17,7 @@ export class FormFieldInfo<T> {
     let messages: { info: string; cssClass: 'info' | 'pending' | 'valid' | 'invalid' }[] = [];
 
     if (field.pending()) {
-      messages = [{ info: 'Checking availability ...', cssClass: 'pending' }];
+      messages = [{ info: 'Checking validity ...', cssClass: 'pending' }];
     } else if (field.touched() && field.errors().length > 0) {
       messages = field.errors().map((e) => ({ info: e.message || 'Invalid', cssClass: 'invalid' }));
     } else if (field.hasMetadata(FIELD_INFO)) {

src/app/registration-form-4/registration-form-4.html

@@ -85,7 +85,7 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
     <input type="checkbox" [field]="registrationForm.newsletter" />
   </label>
   <app-multiselect
-    ariaDescribedby="newsletter-topics-info"
+    fieldDescriptionId="newsletter-topics-info"
     [field]="registrationForm.newsletterTopics"
     [selectOptions]="['Angular', 'React', 'Vue', 'Svelte']"
     label="Topics (multiple possible):"