How to setup Reactive Forms Angular ? 080

 How to setup Reactive Forms Angular ?

Setting up reactive forms in Angular involves understanding form controls, form groups, and leveraging the FormBuilder service. Here's a step-by-step guide:

1. Install the ReactiveFormsModule:

Ensure you have the ReactiveFormsModule imported in your app module or the specific feature module where you'll use the form:

TypeScript

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  // ... other imports
  imports: [
    // ... other modules
    ReactiveFormsModule
  ],
  // ... other declarations
})
export class AppModule {}

2. Build your form model:

Use the FormBuilder service to create your form structure. Define form controls for each input field and combine them into form groups for logical units. Consider using validators for data validation.

TypeScript

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

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['', Validators.minLength(10)]
    });
  }
}

3. Create your form template:

Use HTML elements like <input>, <select>, and <textarea> to represent your form fields. Bind them to form controls defined in your component class using the formControlName directive.

HTML

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

4. Handle form submission (optional):

In your component class, implement a handler for the form submission event (e.g., onSubmit()) to access the form data and perform actions.

TypeScript

onSubmit() {
  if (this.myForm.valid) {
    console.log("Form submitted!", this.myForm.value);
    // Send data to server or perform other actions
  }
}

Additional Tips:

• Explore form arrays for managing dynamic lists of elements in your form.

• Leverage RxJS operators like async and valueChanges for asynchronous tasks and reactive updates.

• Consider using custom validators for specific validation rules beyond built-in ones.

Remember, reactive forms offer more control and flexibility compared to template-driven forms, but require a slightly steeper learning curve. Choose the approach that best suits your project's needs and your team's familiarity with RxJS concepts.

Sources

1. https://github.com/0VictorSV0/Angular-senai

2. https://github.com/Malaya2184/Angular_10_practice

3. https://github.com/Aakitianil/amazon

4. https://github.com/AhmedKhaledMahmoud/CRUD_Operation