Migration Guide

Breaking changes in 2.x

Events renamed:

• In AbstractControl

  • onValueChanged to valueChanges
  • onStatusChanged to statusChanges
  • onTouched to touchChanges

• In FormGroup and FormArray

  • onCollectionChanged to collectionChanges

• In FormControl

  • onFocusChanged to focusChanges

All events are now Streams so previous codes like the following one:

final control = FormControl<String>();

// listen to control changes
control.onValueChanged.addListener((){
  // must access the control to get the value 
  print(control.value);
});

control.value = 'Hello Reactive Forms!';

converts now to:

final control = FormControl<String>();

// listen to control changes
control.valueChanges.listen((String value){
  // the value arrives from the arguments :)
  print(value);
});

control.value = 'Hello Reactive Forms!';

Breaking changes in 3.x

Set a value directly to a FormControl from code do not marks the control as touched, you must explicitly call FormControl.markAsTouched() to show up validation messages in UI. Example:

set name(String newName) {
  final formControl = this.form.control('name');
  formControl.value = newName;
  formControl.markAsTouched();// if newName is invalid then validation messages will show up in UI
}

Breaking changes in 7.x

• Change ReactiveFormField.validationMessages from a Map to a Function that receives the instance of the control and returns the Map with the customized validation messages.

This upgrade now brings the possibility to dynamically change the validation messages based on the current error data.

Example:

Given the form group definition:

final form = fb.group({
   'amount': [5.0, Validators.required, Validators.min(10)],
});

ReactiveTextField(
   formControlName: 'amount',
   validatationMessages: (control) => {
      ValidationMessages.required: 'The amount is required',
      if (control.hasError(ValidationMessages.min))
         ValidationMessages.min: 'The amount must have a minimum value of ${control.getError(ValidationMessages.min)['min']}'
   }
),