How can I design forms using Angular CLI?

How can I design forms using Angular CLI?

You can create forms in Angular using Reactive Forms or Template-driven Forms. Which one would you like to learn about?

I'd like to know more about Reactive Forms.

Great choice! Reactive Forms provide a model-driven approach to handling form inputs. You can start by importing ReactiveFormsModule in your app module.

What are the key components of Reactive Forms?

The key components include FormGroup, FormControl, and FormArray. They help manage the form's state and validation.

Can you show me a simple example of a Reactive Form?

Sure! Here's a basic example:

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

@Component({
  selector: 'app-my-form',
  template: `<form [formGroup]='myForm'>
               <input formControlName='name'>
               <button (click)='onSubmit()'>Submit</button>
             </form>`
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['']
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}