diff --git a/src/app/field-aria-attributes.ts b/src/app/field-aria-attributes.ts
index c2ce81c..18cfe78 100644
--- a/src/app/field-aria-attributes.ts
+++ b/src/app/field-aria-attributes.ts
@@ -1,25 +1,28 @@
 import { computed, Directive, input } from '@angular/core';
-import { FieldTree } from '@angular/forms/signals';
+import { FieldTree, FormField } from '@angular/forms/signals';
 
 @Directive({
-  selector: '[formFieldAria]',
+  selector: '[formField]',
   host: {
     '[aria-invalid]': 'ariaInvalid()',
     '[aria-busy]': 'ariaBusy()',
     '[aria-describedby]': 'ariaDescribedBy()',
     '[aria-errormessage]': 'ariaErrorMessage()',
   },
+  hostDirectives: [
+    { directive: FormField, inputs: ['formField'] }
+  ]
 })
 export class FieldAriaAttributes<T> {
-  readonly formFieldAria = input.required<FieldTree<T>>();
+  readonly formField = input.required<FieldTree<T>>();
   readonly fieldDescriptionId = input<string>();
 
   readonly ariaInvalid = computed(() => {
-    const state = this.formFieldAria()();
+    const state = this.formField()();
     return state.touched() && !state.pending() ? state.errors().length > 0 : undefined;
   });
   readonly ariaBusy = computed(() => {
-    const state = this.formFieldAria()();
+    const state = this.formField()();
     return state.pending();
   });
   readonly ariaDescribedBy = computed(() => {
diff --git a/src/app/registration-form-4/registration-form-4.html b/src/app/registration-form-4/registration-form-4.html
index ea08fe3..38e5551 100644
--- a/src/app/registration-form-4/registration-form-4.html
+++ b/src/app/registration-form-4/registration-form-4.html
@@ -14,7 +14,6 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
       id="myField"
       fieldDescriptionId="username-info"
       [formField]="registrationForm.username"
-      [formFieldAria]="registrationForm.username"
     />
     <app-form-field-info id="username-info" [fieldRef]="registrationForm.username" />
   </label>
@@ -30,7 +29,6 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
         type="number"
         fieldDescriptionId="age-info"
         [formField]="registrationForm.age"
-        [formFieldAria]="registrationForm.age"
       />
       <app-form-field-info id="age-info" [fieldRef]="registrationForm.age" />
     </label>
@@ -44,7 +42,6 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
         autocomplete
         fieldDescriptionId="pw1-info"
         [formField]="registrationForm.password.pw1"
-        [formFieldAria]="registrationForm.password.pw1"
       />
       <app-form-field-info id="pw-info pw1-info" [fieldRef]="registrationForm.password.pw1" />
     </label>
@@ -55,7 +52,6 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
         autocomplete
         fieldDescriptionId="pw2-info"
         [formField]="registrationForm.password.pw2"
-        [formFieldAria]="registrationForm.password.pw2"
       />
       <app-form-field-info id="pw-info pw2-info" [fieldRef]="registrationForm.password.pw2" />
     </label>
@@ -74,7 +70,6 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
             type="email"
             [fieldDescriptionId]="`email-info email${$index}-info`"
             [formField]="emailField"
-            [formFieldAria]="emailField"
             [aria-label]="'E-mail ' + $index"
           />
           <button type="button" (click)="removeEmail($index)">-</button>
@@ -87,12 +82,11 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
   </fieldset>
   <label
     >Subscribe to Newsletter?
-    <input type="checkbox" [formField]="registrationForm.newsletter" [formFieldAria]="registrationForm.newsletter" />
+    <input type="checkbox" [formField]="registrationForm.newsletter" />
   </label>
   <app-multiselect
     fieldDescriptionId="newsletter-topics-info"
     [formField]="registrationForm.newsletterTopics"
-    [formFieldAria]="registrationForm.newsletterTopics"
     [selectOptions]="['Angular', 'React', 'Vue', 'Svelte']"
     label="Topics (multiple possible):"
   />
@@ -103,7 +97,6 @@ <h1>Version 4: Metadata and Accessibility Handling</h1>
       type="checkbox"
       fieldDescriptionId="agree-info"
       [formField]="registrationForm.agreeToTermsAndConditions"
-      [formFieldAria]="registrationForm.agreeToTermsAndConditions"
     />
   </label>
   <app-form-field-info id="agree-info" [fieldRef]="registrationForm.agreeToTermsAndConditions" />
diff --git a/src/app/registration-form-4/registration-form-4.ts b/src/app/registration-form-4/registration-form-4.ts
index 06981a5..1092a66 100644
--- a/src/app/registration-form-4/registration-form-4.ts
+++ b/src/app/registration-form-4/registration-form-4.ts
@@ -6,7 +6,6 @@ import {
   debounce,
   disabled,
   email,
-  FormField,
   form,
   maxLength,
   metadata,
@@ -168,7 +167,6 @@ export const formSchema = schema<RegisterFormData>((path) => {
   selector: 'app-registration-form-4',
   imports: [
     BackButton,
-    FormField,
     DebugOutput,
     FormFieldInfo,
     IdentityForm,