angulardart_forms 6.0.3

Forms framework for AngularDart.

AngularDart Forms

Forms framework for AngularDart with validation and reactive forms support.

Part of the AngularDart ecosystem.

Features

• Template-driven forms - Simple forms with directives
• Reactive forms - Programmatic form control with FormBuilder
• Validation - Built-in and custom validators
• Form controls - Input, checkbox, radio, select, and more
• Two-way binding - Automatic sync between form and model

Installation

Add to your pubspec.yaml:

dependencies:
  angulardart: ^8.0.0
  angulardart_forms: ^5.0.0

Quick Start

Template-driven form

import 'package:angulardart/angular.dart';
import 'package:angulardart_forms/forms.dart';

@Component(
  selector: 'my-form',
  template: '''
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <input ngModel name="name" required placeholder="Name">
      <input ngModel name="email" type="email" required placeholder="Email">
      <button type="submit" [disabled]="!form.valid">Submit</button>
    </form>
  ''',
  directives: [formDirectives],
)
class MyForm {
  void onSubmit(NgForm form) {
    print('Form data: ${form.value}');
  }
}

Reactive form with FormBuilder

import 'package:angulardart/angular.dart';
import 'package:angulardart_forms/forms.dart';

@Component(
  selector: 'reactive-form',
  template: '''
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name">
      <input formControlName="email" placeholder="Email">
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  ''',
  directives: [formDirectives],
)
class ReactiveForm {
  late FormGroup form;
  
  ReactiveForm(FormBuilder fb) {
    form = fb.group({
      'name': fb.control('', Validators.required),
      'email': fb.control('', [Validators.required, Validators.email]),
    });
  }
  
  void onSubmit() {
    if (form.valid) {
      print('Form data: ${form.value}');
    }
  }
}

Validation

Built-in validators:

• Validators.required - Field must not be empty
• Validators.email - Must be a valid email
• Validators.minLength(n) - Minimum length
• Validators.maxLength(n) - Maximum length
• Validators.pattern(regex) - Match a pattern

Custom validator example:

ValidatorFn myCustomValidator = (AbstractControl control) {
  if (control.value != 'expected') {
    return {'myError': 'Value must be "expected"'};
  }
  return null;
};

Form Controls

• NgModel - Two-way binding for form inputs
• NgForm - Form container with validation state
• NgControl - Base class for form controls
• NgControlGroup - Group of related controls

Documentation

• API Reference
• AngularDart main package

Requirements

• Dart SDK >= 3.0.0
• AngularDart >= 8.0.0

License

MIT License

---

Disclaimer

AngularDart Reborn is a community-maintained fork of Google's original AngularDart framework. This project is not affiliated with, endorsed by, or sponsored by Google LLC. Angular and AngularDart are trademarks of Google LLC.

This is an independent, 100% community-driven project. For the original Angular Framework (TypeScript/JavaScript), visit angular.io.