Create an AbstractControlGroup and AbstractForm which will allow different infrastructure to create different implementation of ControlGroups and Forms with different backing values.

Example usage: cl/205017920

Global Presubmit: https://test.corp.google.com/OCL:204254973:BASE:205149190:1531953387644:95fc22b0

PiperOrigin-RevId: 205178408

Author: TedSander

angular_forms/CHANGELOG.md

@@ -1,3 +1,9 @@
+### New Features
+
+*   Add AbstractControlGroup and AbstractNgForm to allow infrastructure to
+    create their own form systems that can be backed by types such as a proto,
+    or have different control group logic.
+
 ### Breaking Changes
 
 *   Use value from AbstractControl for valueChanges event instead of internal

angular_forms/lib/angular_forms.dart

@@ -17,6 +17,7 @@ export 'src/directives.dart'
         setUpControlGroup,
         formDirectives,
         AbstractControlDirective,
+        AbstractNgForm,
         ChangeFunction,
         CheckboxControlValueAccessor,
         ControlContainer,
@@ -48,7 +49,12 @@ export 'src/directives.dart'
         ValidatorFn;
 export 'src/form_builder.dart' show FormBuilder;
 export 'src/model.dart'
-    show AbstractControl, Control, ControlGroup, ControlArray;
+    show
+        AbstractControl,
+        Control,
+        AbstractControlGroup,
+        ControlGroup,
+        ControlArray;
 export 'src/validators.dart' show NG_VALIDATORS, Validators;
 
 /// Shorthand set of providers used for building Angular forms.

angular_forms/lib/src/directives.dart

@@ -35,7 +35,7 @@ export 'directives/ng_control_group.dart' show NgControlGroup;
 export 'directives/ng_control_name.dart' show NgControlName;
 // ignore: deprecated_member_use
 export 'directives/ng_control_status.dart' show NgControlStatus;
-export 'directives/ng_form.dart' show NgForm;
+export 'directives/ng_form.dart' show NgForm, AbstractNgForm;
 export 'directives/ng_form_control.dart' show NgFormControl;
 export 'directives/ng_form_model.dart' show NgFormModel;
 export 'directives/ng_model.dart' show NgModel;

angular_forms/lib/src/directives/abstract_form.dart

@@ -10,23 +10,23 @@ import 'ng_control.dart' show NgControl;
 import 'ng_control_group.dart' show NgControlGroup;
 
 /// A base implementation of [Form].
-abstract class AbstractForm extends ControlContainer implements Form {
-  final _ngSubmit = new StreamController<ControlGroup>.broadcast(sync: true);
-  final _ngBeforeSubmit =
-      new StreamController<ControlGroup>.broadcast(sync: true);
+abstract class AbstractForm<T extends AbstractControlGroup>
+    extends ControlContainer<T> implements Form {
+  final _ngSubmit = new StreamController<T>.broadcast(sync: true);
+  final _ngBeforeSubmit = new StreamController<T>.broadcast(sync: true);
 
-  ControlGroup get form;
+  T get form;
 
   /// An event fired with the user has triggered a form submission.
   @Output()
-  Stream<ControlGroup> get ngSubmit => _ngSubmit.stream;
+  Stream<T> get ngSubmit => _ngSubmit.stream;
 
   /// An event that is fired before the main form submission event.
   ///
   /// This is intended to be used to set form values or perform validation on
   /// submit instead of when a value changes.
   @Output()
-  Stream<ControlGroup> get ngBeforeSubmit => _ngBeforeSubmit.stream;
+  Stream<T> get ngBeforeSubmit => _ngBeforeSubmit.stream;
 
   @HostListener('submit')
   void onSubmit(Event event) {
@@ -45,7 +45,7 @@ abstract class AbstractForm extends ControlContainer implements Form {
   Form get formDirective => this;
 
   @override
-  ControlGroup get control => form;
+  T get control => form;
 
   @override
   List<String> get path => [];
@@ -54,8 +54,8 @@ abstract class AbstractForm extends ControlContainer implements Form {
   Control getControl(NgControl dir) => form?.findPath(dir.path) as Control;
 
   @override
-  ControlGroup getControlGroup(NgControlGroup dir) =>
-      (form?.findPath(dir.path) as ControlGroup);
+  AbstractControlGroup getControlGroup(NgControlGroup dir) =>
+      form?.findPath(dir.path) as AbstractControlGroup;
 
   @override
   void updateModel(NgControl dir, dynamic value) {

angular_forms/lib/src/directives/control_container.dart

@@ -1,12 +1,13 @@
-import '../model.dart' show ControlGroup;
+import '../model.dart' show AbstractControlGroup;
 import 'abstract_control_directive.dart' show AbstractControlDirective;
 import 'form_interface.dart' show Form;
 
 /// A directive that contains multiple [NgControl]s contained in a
-/// [ControlGroup].
+/// [AbstractControlGroup].
 ///
 /// Only used by the forms package.
-abstract class ControlContainer extends AbstractControlDirective<ControlGroup> {
+abstract class ControlContainer<T extends AbstractControlGroup>
+    extends AbstractControlDirective<T> {
   /// Get the form to which this container belongs.
   Form get formDirective;
 }

angular_forms/lib/src/directives/form_interface.dart

@@ -1,4 +1,4 @@
-import '../model.dart' show Control, ControlGroup;
+import '../model.dart' show Control, AbstractControlGroup;
 import 'ng_control.dart' show NgControl;
 import 'ng_control_group.dart' show NgControlGroup;
 
@@ -21,8 +21,9 @@ abstract class Form {
   /// Remove a group of controls from this form.
   void removeControlGroup(NgControlGroup dir);
 
-  /// Look up the [ControlGroup] associated with a particular [NgControlGroup].
-  ControlGroup getControlGroup(NgControlGroup dir);
+  /// Look up the [AbstractControlGroup] associated with a particular
+  /// [NgControlGroup].
+  AbstractControlGroup getControlGroup(NgControlGroup dir);
 
   /// Update the model for a particular control with a new value.
   void updateModel(NgControl dir, dynamic value);

angular_forms/lib/src/directives/ng_control_group.dart

@@ -60,7 +60,8 @@ import 'validators.dart' show ValidatorFn;
   ],
   exportAs: 'ngForm',
 )
-class NgControlGroup extends ControlContainer implements OnInit, OnDestroy {
+class NgControlGroup extends ControlContainer<ControlGroup>
+    implements OnInit, OnDestroy {
   final ValidatorFn validator;
   final ControlContainer _parent;
 

angular_forms/lib/src/directives/ng_form.dart

@@ -3,7 +3,8 @@ import 'dart:async';
 import 'package:meta/meta.dart';
 import 'package:angular/angular.dart';
 
-import '../model.dart' show AbstractControl, ControlGroup, Control;
+import '../model.dart'
+    show AbstractControl, AbstractControlGroup, ControlGroup, Control;
 import '../validators.dart' show NG_VALIDATORS;
 import 'abstract_form.dart' show AbstractForm;
 import 'control_container.dart' show ControlContainer;
@@ -75,24 +76,39 @@ import 'shared.dart' show setUpControl, setUpControlGroup, composeValidators;
   exportAs: 'ngForm',
   visibility: Visibility.all,
 )
-class NgForm extends AbstractForm {
-  ControlGroup form;
-
+class NgForm extends AbstractNgForm<ControlGroup> {
   NgForm(@Optional() @Self() @Inject(NG_VALIDATORS) List<dynamic> validators) {
     form = new ControlGroup({}, composeValidators(validators));
   }
 
+  @override
+  ControlGroup createGroup(NgControlGroup _) => ControlGroup({});
+}
+
+/// Abstract class to easily create forms that are template driven.
+///
+/// This allows an implementing form to easily specify how to create control
+/// groups, and controls. Allowing for infrastructure to create form systems
+/// that are backed by different types such as protos.
+abstract class AbstractNgForm<T extends AbstractControlGroup>
+    extends AbstractForm<T> {
+  T form;
+
   @Input('ngDisabled')
   set disabled(bool isDisabled) {
     toggleDisabled(isDisabled);
   }
 
   Map<String, AbstractControl> get controls => form.controls;
 
+  T createGroup(NgControlGroup dir);
+  // This is separate to allow clients to override the logic if they wish.
+  Control createControl(NgControl _) => Control();
+
   @override
   void addControl(NgControl dir) {
     var container = findContainer(dir.path);
-    var ctrl = new Control();
+    var ctrl = createControl(dir);
     container.addControl(dir.name, ctrl);
     scheduleMicrotask(() {
       setUpControl(ctrl, dir);
@@ -114,7 +130,7 @@ class NgForm extends AbstractForm {
   @override
   void addControlGroup(NgControlGroup dir) {
     var container = findContainer(dir.path);
-    var group = new ControlGroup({});
+    var group = createGroup(dir);
     container.addControl(dir.name, group);
     scheduleMicrotask(() {
       setUpControlGroup(group, dir);
@@ -141,8 +157,8 @@ class NgForm extends AbstractForm {
   }
 
   @protected
-  ControlGroup findContainer(List<String> path) {
+  T findContainer(List<String> path) {
     path.removeLast();
-    return path.isEmpty ? form : (form.findPath(path) as ControlGroup);
+    return path.isEmpty ? form : (form.findPath(path) as T);
   }
 }

angular_forms/lib/src/directives/ng_form_model.dart

@@ -87,7 +87,7 @@ import 'validators.dart' show ValidatorFn;
   exportAs: 'ngForm',
   visibility: Visibility.all,
 )
-class NgFormModel extends AbstractForm implements AfterChanges {
+class NgFormModel extends AbstractForm<ControlGroup> implements AfterChanges {
   final ValidatorFn _validator;
 
   bool _formChanged = false;

angular_forms/lib/src/directives/shared.dart

@@ -1,7 +1,7 @@
 import 'dart:html';
 import 'dart:js_util' as js_util;
 
-import '../model.dart' show Control, ControlGroup;
+import '../model.dart' show Control, AbstractControlGroup;
 import '../validators.dart' show Validators;
 import 'abstract_control_directive.dart' show AbstractControlDirective;
 import 'checkbox_value_accessor.dart' show CheckboxControlValueAccessor;
@@ -43,7 +43,7 @@ void setUpControl(Control control, NgControl dir) {
   dir.valueAccessor.registerOnTouched(() => control.markAsTouched());
 }
 
-void setUpControlGroup(ControlGroup control, NgControlGroup dir) {
+void setUpControlGroup(AbstractControlGroup control, NgControlGroup dir) {
   if (control == null) _throwError(dir, 'Cannot find control');
   control.validator = Validators.compose([control.validator, dir.validator]);
 }