Recommended
Consider an Angular standalone component with a reactive form that requires a non-empty email input. What will be the form's valid status and error state after submitting the form with an empty email field?
import { Component } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-email-form', standalone: true, template: ` <form [formGroup]="emailForm" (ngSubmit)="onSubmit()"> <input formControlName="email" placeholder="Email" aria-label="Email input" /> <button type="submit">Submit</button> <div *ngIf="emailForm.controls.email.invalid && emailForm.controls.email.touched"> Email is required. </div> </form> ` }) export class EmailFormComponent { emailForm = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]) }); onSubmit() { this.emailForm.markAllAsTouched(); console.log('Form valid:', this.emailForm.valid); console.log('Email errors:', this.emailForm.controls.email.errors); } }
Think about what Angular does when a required field is empty and the form is submitted.
When the form is submitted with an empty email, Angular marks the control as touched and runs validators. Since the email is empty, the required and email validators fail, making the form invalid and the control's errors object contain these validation errors.
Given a template-driven Angular form with an input bound to ngModel, what will be the value of the username property after the user types 'Alice' into the input?
import { Component } from '@angular/core'; @Component({ selector: 'app-user-form', standalone: true, template: ` <form> <input name="username" [(ngModel)]="username" aria-label="Username input" /> </form> <p>Username: {{ username }}</p> ` }) export class UserFormComponent { username = ''; }
Remember how two-way binding with [(ngModel)] works in Angular.
The [(ngModel)] directive binds the input's value to the username property. When the user types 'Alice', the property updates immediately to that string.
In an Angular reactive form, you want to disable the submit button if the form is invalid. Which template snippet correctly implements this behavior?
<form [formGroup]="myForm" (ngSubmit)="submit()"> <button type="submit" [disabled]="???">Submit</button> </form>
Check the form group's properties that indicate validity.
The invalid property is a boolean that is true when the form is invalid. Binding [disabled]="myForm.invalid" disables the button correctly. Option A is logically equivalent but less direct. Option A compares a string which is valid but less common. Option A is incorrect because submit is not a control.
In this Angular template-driven form, the input value changes but the component property does not update. What is the cause?
<form> <input name="email" [(ngModel)]="email" aria-label="Email input" /> </form> export class EmailComponent { email = ''; }
Check module imports related to forms.
For template-driven forms and ngModel to work, the FormsModule must be imported in the Angular module. Without it, Angular does not recognize the directive and the model does not update.
Angular 17 introduced signals for reactive forms. How does using signals for form state improve testing user interactions compared to traditional observables?
Think about how signals differ from observables in timing and access.
Signals provide synchronous and immediate access to reactive form state, unlike observables which require subscriptions and asynchronous handling. This makes writing tests for user interactions more straightforward and less error-prone.