Bird
0
0

Given the following Angular template snippet, what will be the value of submittedName after the form is submitted?

medium📝 component behavior Q13 of 15
Angular - Template-Driven Forms
Given the following Angular template snippet, what will be the value of submittedName after the form is submitted?
<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <input name="name" [(ngModel)]="userName" required>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

And the component code:
userName = '';
submittedName = '';

submitForm() {
  this.submittedName = this.userName;
}

If the user types "Alice" and submits, what is submittedName?
Aundefined
B"" (empty string)
C"Alice"
Dnull
Step-by-Step Solution
Solution:
  1. Step 1: Understand two-way binding effect

    The input field binds userName with two-way binding, so typing "Alice" updates userName to "Alice".
  2. Step 2: Check submitForm behavior

    On submit, submitForm() sets submittedName to the current userName, which is "Alice".
  3. Final Answer:

    "Alice" -> Option C
  4. Quick Check:

    Two-way binding updates userName, submitForm copies it [OK]
Quick Trick: Two-way binding updates property before submit [OK]
Common Mistakes:
MISTAKES
  • Assuming submittedName stays empty
  • Confusing variable names
  • Ignoring two-way binding effect

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes