Form submission handling in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the form is submitted in this Angular component?

Consider this Angular standalone component with a simple form. What will be the console output when the user submits the form with the input value 'hello'?

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-simple-form',
  standalone: true,
  template: `
    <form (ngSubmit)="onSubmit()">
      <input type="text" [(ngModel)]="name" name="name" required />
      <button type="submit">Submit</button>
    </form>
  `,
  imports: [FormsModule]
})
export class SimpleFormComponent {
  name = '';

  onSubmit() {
    console.log(`Submitted name: ${this.name}`);
  }
}

A Console logs: 'Submitted name: ' (empty string)

B No console output; form submission is prevented silently

C Console logs: 'Submitted name: undefined'

D Console logs: 'Submitted name: hello'

💡 Hint

Think about how two-way binding with [(ngModel)] works and when onSubmit is called.

The [(ngModel)] binds the input value to the name property. When the form is submitted, onSubmit logs the current name value, which is 'hello' if typed by the user.

📝 Syntax

intermediate

Which option correctly binds a form control to a component property in Angular?

Given a component property email, which template snippet correctly binds an input field to it for form submission?

A <input type="email" [(ngModel)]="email" name="email" required />

B <input type="email" [value]="email" (input)="email = $event.target.value" />

C <input type="email" bind-value="email" />

D <input type="email" ngModel email />

💡 Hint

Remember the Angular syntax for two-way binding uses [(ngModel)] and requires a name attribute inside forms.

Option A uses the correct two-way binding syntax with [(ngModel)] and includes the required name attribute. Option A is a manual binding but misses form integration. Options C and D are invalid syntax.

❓ state_output

advanced

What is the value of submittedData after submitting this reactive form?

Look at this Angular component using reactive forms. After the user types 'Angular' in the input and submits, what is the value of submittedData?

Angular

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="framework" />
      <button type="submit">Submit</button>
    </form>
  `
})
export class ReactiveFormComponent {
  form = new FormGroup({
    framework: new FormControl('')
  });

  submittedData: string | null = null;

  onSubmit() {
    this.submittedData = this.form.value.framework;
  }
}

A 'Angular'

B null

C undefined

D '' (empty string)

💡 Hint

Reactive forms store input values in the form controls. The onSubmit method assigns the control's value to submittedData.

The user input 'Angular' is stored in the 'framework' control. On submit, submittedData is set to this value, so it becomes 'Angular'.

🔧 Debug

advanced

Why does this Angular form submission not log the input value?

Given this component, the console logs 'Submitted value: ' with an empty string even after typing text. What is the cause?

Angular

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-buggy-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form (ngSubmit)="submit()">
      <input type="text" [(ngModel)]="inputValue" name="inputValue" />
      <button type="submit">Send</button>
    </form>
  `
})
export class BuggyFormComponent {
  inputValue = '';

  submit() {
    console.log(`Submitted value: ${this.inputValue}`);
  }
}

A The submit method is not bound correctly to the form's ngSubmit event

B The input field lacks a required attribute, so the form resets the value

C Missing import of FormsModule or ReactiveFormsModule causes ngModel not to update the property

D The inputValue property is not initialized, so it stays empty

💡 Hint

Check if the necessary Angular modules are imported to enable ngModel two-way binding.

Without importing FormsModule, Angular does not process ngModel bindings properly, so the property inputValue never updates from the input field.

🧠 Conceptual

expert

Which Angular form submission approach ensures the form is reset only after successful async server response?

You want to submit a form and reset it only if the server confirms success asynchronously. Which approach correctly handles this?

A Use <code>setTimeout(() =&gt; form.reset(), 1000)</code> to reset the form after 1 second regardless of response

B Subscribe to the async submit observable and call <code>form.reset()</code> inside the success callback

C Reset the form in the component constructor to ensure it is clean before submission

D Call <code>form.reset()</code> immediately after calling the async submit function without waiting for response

💡 Hint

Think about how to handle asynchronous operations and only reset after success.

Option B waits for the server response before resetting the form, ensuring the form is only cleared on success. Other options reset too early or arbitrarily.

Practice

1. What is the purpose of the (ngSubmit) directive in Angular forms?

easy

A. It binds the form inputs to component properties.

B. It listens for the form's submit event and triggers a handler function.

C. It disables the submit button when the form is invalid.

D. It styles the form elements automatically.

Solution

1. Step 1: Understand the role of (ngSubmit)

   The (ngSubmit) directive listens for the submit event on a form element in Angular.

2. Step 2: Identify what happens on submit

   When the form is submitted, (ngSubmit) triggers the specified handler function in the component.

3. Final Answer:

   It listens for the form's submit event and triggers a handler function. -> Option B

4. Quick Check:

   (ngSubmit) handles form submission event [OK]

Hint: Remember (ngSubmit) triggers code on form submit [OK]

Common Mistakes:

• Confusing (ngSubmit) with input binding
• Thinking (ngSubmit) disables buttons
• Assuming (ngSubmit) styles forms

2. Which of the following is the correct syntax to bind an input field to a component property named username using two-way binding in Angular?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall two-way binding syntax

   Angular uses [(ngModel)] for two-way data binding on form inputs.

2. Step 2: Match syntax to property

   The correct syntax to bind username is <input [(ngModel)]="username">.

3. Final Answer:

   <input [(ngModel)]="username"> -> Option A

4. Quick Check:

   Two-way binding = [(ngModel)] [OK]

Hint: Two-way binding always uses [(ngModel)] [OK]

Common Mistakes:

• Using only [ngModel] without parentheses
• Using (ngModelChange) alone without brackets
• Confusing event binding with property binding

3. 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?

medium

A. undefined

B. "" (empty string)

C. "Alice"

D. null

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]

Hint: Two-way binding updates property before submit [OK]

Common Mistakes:

• Assuming submittedName stays empty
• Confusing variable names
• Ignoring two-way binding effect

4. Identify the error in this Angular form submission code snippet:

<form (ngSubmit)="onSubmit">
  <input [(ngModel)]="email" name="email" required>
  <button type="submit">Send</button>
</form>

Component method:

onSubmit() {
  console.log('Form submitted:', this.email);
}

medium

A. The (ngSubmit) should be (ngSubmit)="onSubmit()" with parentheses.

B. The input is missing a type attribute.

C. The button should have [disabled]="form.invalid".

D. The name attribute on input is not needed.

Solution

1. Step 1: Check (ngSubmit) syntax

   The (ngSubmit) directive requires a function call with parentheses to execute the method on submit.

2. Step 2: Identify the missing parentheses

   Using (ngSubmit)="onSubmit" passes the function reference but does not call it; it should be (ngSubmit)="onSubmit()".

3. Final Answer:

   The (ngSubmit) should be (ngSubmit)="onSubmit()" with parentheses. -> Option A

4. Quick Check:

   Call handler with () in (ngSubmit) [OK]

Hint: Always add () to call function in (ngSubmit) [OK]

Common Mistakes:

• Omitting parentheses in (ngSubmit)
• Ignoring required name attribute
• Thinking input type is mandatory for submission

5. You want to disable the submit button in an Angular form until all required fields are valid. Which approach correctly implements this behavior?

<form (ngSubmit)="submit()" #myForm="ngForm">
  <input name="email" [(ngModel)]="email" required>
  <input name="password" [(ngModel)]="password" required minlength="6">
  <button type="submit" ???>Submit</button>
</form>

What should replace ??? to disable the button when the form is invalid?

hard

A. [disabled]="email === '' || password.length < 6"

B. [disabled]="myForm.valid"

C. [disabled]="false"

D. [disabled]="myForm.invalid"

Solution

1. Step 1: Understand Angular form validity

   The template reference variable myForm exposes the form's validity state via myForm.invalid and myForm.valid.

2. Step 2: Use form invalid property to disable button

   Setting [disabled]="myForm.invalid" disables the submit button until the form is valid.

3. Final Answer:

   [disabled]="myForm.invalid" -> Option D

4. Quick Check:

   Disable button when form.invalid is true [OK]

Hint: Use form.invalid to disable submit button [OK]

Common Mistakes:

• Using negation incorrectly with valid property
• Manually checking fields instead of form state
• Setting disabled to false always