Typed forms in Angular

Typed forms in Angular allow you to use TypeScript interfaces and classes to define the structure of your form data, making your forms more strongly typed and reducing the chances of runtime errors. In Angular 15, this feature is improved and provides more robust form validation capabilities.

Here's an example of how to use typed forms in Angular 15:

Create a class or interface to define the structure of your form data.

export interface ContactFormData {
  name: string;
  email: string;
  message: string;
}

In your component class, define a property to store the form data.

export class ContactComponent {
  formData: ContactFormData = {
    name: '',
    email: '',
    message: ''
  };
}

In your component's template, create a form using the Angular forms API and bind the form fields to the form data properties.

<form>
  <div>
    <label>Name:</label>
    <input type="text" [(ngModel)]="formData.name">
  </div>
  <div>
    <label>Email:</label>
    <input type="email" [(ngModel)]="formData.email">
  </div>
  <div>
    <label>Message:</label>
    <textarea [(ngModel)]="formData.message"></textarea>
  </div>
  <button type="submit">Submit</button>
</form>

Finally, you can add validation to your form using Angular's built-in form validation directives and techniques. For example, you can add required validation to the name and email fields like this:

<form>
  <div>
    <label>Name:</label>
    <input type="text" [(ngModel)]="formData.name" required>
  </div>
  <div>
    <label>Email:</label>
    <input type="email" [(ngModel)]="formData.email" required>
  </div>
  <div>
    <label>Message:</label>
    <textarea [(ngModel)]="formData.message"></textarea>
  </div>
  <button type="submit">Submit</button>
</form>

With these steps, you have created a typed form in Angular 15 that leverages the power of TypeScript and the Angular forms API to create robust and maintainable forms. By using typed forms, you can catch form errors at compile time, reducing the chances of runtime errors and making it easier to debug your forms.

Typed reactive forms in Angular allow you to use TypeScript interfaces and classes to define the structure of your form data, making your forms more strongly typed and reducing the chances of runtime errors. With reactive forms, you can create dynamic and complex forms that can react to user interactions and changes in form data.

Here's an example of how to use typed reactive forms in Angular:

Create a class or interface to define the structure of your form data.

export interface ContactFormData {
  name: string;
  email: string;
  message: string;
}

In your component class, create a FormGroup instance using the FormBuilder service.

export class ContactComponent {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['']
    });
  }
}

In your component's template, bind the form to your template using the formGroup directive.

<form [formGroup]="form">
  <div>
    <label>Name:</label>
    <input type="text" formControlName="name">
  </div>
  <div>
    <label>Email:</label>
    <input type="email" formControlName="email">
  </div>
  <div>
    <label>Message:</label>
    <textarea formControlName="message"></textarea>
  </div>
  <button type="submit">Submit</button>
</form>

Finally, you can add validation to your form using Angular's built-in form validation techniques. For example, you can show an error message if the email field is not valid like this:

<form [formGroup]="form">
  <div>
    <label>Name:</label>
    <input type="text" formControlName="name">
  </div>
  <div>
    <label>Email:</label>
    <input type="email" formControlName="email">
    <div *ngIf="form.get('email').invalid && form.get('email').touched">
      Email is required and must be a valid email address.
    </div>
  </div>
  <div>
    <label>Message:</label>
    <textarea formControlName="message"></textarea>
  </div>
  <button type="submit">Submit</button>
</form>

With these steps, you have created a typed reactive form in Angular that leverages the power of TypeScript and the Angular reactive forms API to create dynamic and maintainable forms. By using typed reactive forms, you can catch form errors at compile time, reduce the chances of runtime errors, and make it easier to debug your forms.