Bird
0
0

You want to create a standalone Angular component with a form input bound to userName. Which setup correctly enables two-way binding and accessibility?

hard🚀 Application Q15 of 15
Angular - Template-Driven Forms
You want to create a standalone Angular component with a form input bound to userName. Which setup correctly enables two-way binding and accessibility?
@Component({
  standalone: true,
  imports: [/* ? */]
})
export class MyComponent {
  userName = '';
}

Template:
<label for="nameInput">Name:</label>
<input id="nameInput" type="text" [(ngModel)]="userName" aria-label="User name input" />
Aimports: [BrowserModule]
Bimports: [ReactiveFormsModule]
Cimports: [FormsModule]
Dimports: []
Step-by-Step Solution
Solution:
  1. Step 1: Identify module needed for [(ngModel)]

    [(ngModel)] requires FormsModule to work in template-driven forms.
  2. Step 2: Confirm accessibility features

    The label uses for linked to input id, and input has aria-label, ensuring accessibility.
  3. Final Answer:

    imports: [FormsModule] -> Option C
  4. Quick Check:

    FormsModule + proper labels = accessible two-way binding [OK]
Quick Trick: Use FormsModule for ngModel and label for accessibility [OK]
Common Mistakes:
MISTAKES
  • Using ReactiveFormsModule instead of FormsModule for ngModel
  • Omitting label or aria-label for accessibility
  • Leaving imports empty and expecting binding to work

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes