Feature Request: implement the onSubmitted feature at Form level

[dumikaiya]

Request Currently one has to implement the onSubmitted at ReactiveTextField level as is the case with the default Flutter TextFields. I would like to request that the onSubmitted be implemented at Form level as well for those that want to submit the entire form. If for some reason one wants to call different function for different fields then just like the formControlName and formControl they shouldn't be implemented at the same time such that either one can only implement the Form level onSubmitted or the field level onSubmitted. This is how Angular implements it. I will post an example of how this would look like, just the build function:

Current implementation

class CurrentImplementation extends StatelessWidget {
  final form = fb.group({
    'email': [''],
    'password': ['']
  });

  CurrentImplementation({super.key});
  @override
  Widget build(BuildContext context) {
    return ReactiveForm(
      formGroup: form,
      child: Column(
        children: <Widget>[
          ReactiveTextField(
              formControlName: 'email',
              onSubmitted: (control) {
                // perform some authentication
              }),
          ReactiveTextField(
              formControlName: 'password',
              obscureText: true,
              onSubmitted: (control) {
                // perform some authentication
              }),
        ],
      ),
    );
  }
}

Desired implementation

class DesiredImplementation extends StatelessWidget {
  final form = fb.group({
    'email': [''],
    'password': ['']
  });

  DesiredImplementation({super.key});
  @override
  Widget build(BuildContext context) {
    return ReactiveForm(
      formGroup: form,
      onSubmitted: (control) {
        // perform some authentication
      },
      child: Column(
        children: <Widget>[
          ReactiveTextField(
            formControlName: 'email',
          ),
          ReactiveTextField(
            formControlName: 'password',
            obscureText: true,
          ),
        ],
      ),
    );
  }
}

Justification Assume one has a large number of fields, having to implement those function for each field seem unreasonable

[joanpablo]

Hi @dumikaiya,

Thanks for these suggestions. I will take a look at Angular behavior as well as your implementation.

[dumikaiya]

Thank you so much @joanpablo, here's an example from angular docs for quick reference:

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}