dynamic :formControl

Author: waseemdev

docs/custom-properties.md

@@ -438,14 +438,14 @@ Forms made easy!
 Full example:
 ```XML
 <Column :formGroup="loginFormGroup">
-  <TextField :formControl="username">
+  <TextField :formControl="'username'">
     <decoration>
         <InputDecoration labelText="'username' | translate" errorText="ctrl.loginFormGroup.get('username').firstErrorIfTouched | translate">
         </InputDecoration>
     </decoration>
   </TextField>
 
-  <TextField :formControl="password" obscureText="true">
+  <TextField :formControl="'password'" obscureText="true">
     <decoration>
         <InputDecoration labelText="'password' | translate" errorText="ctrl.loginFormGroup.get('password').firstErrorIfTouched | translate">
         </InputDecoration>
@@ -464,8 +464,8 @@ Then add the controls in the controller class:
 ```dart
   MyLoginController() {
     loginFormGroup.addAll([
-      FomrControl<String>('username', '', validators: [Validators.required]),
-      FomrControl<String>('password', '', validators: [Validators.required])
+      FormControl<String>('username', '', validators: [Validators.required]),
+      FormControl<String>('password', '', validators: [Validators.required])
     ]);
     // add this only if you use :formSubmit
     loginFormGroup.onSubmit(_login);
@@ -495,13 +495,13 @@ Then add the controls in the controller class:
 - The `:formGroup` is optional, if you didn't add it then the form group will be named as `formGroup`.
 - The `:formControl` can be added to `TextField` or any Widget that have `value` property and `onChanged` event like `Switch`, `DropdownButton`:
 ```XML
-  <SwitchListTile :formControl="darkModeEnabled">
+  <SwitchListTile :formControl="'darkModeEnabled'">
     <title>
       <Text text="'Dark mode'" />
     </title>
   </SwitchListTile>
 
-  <DropdownButton :formControl="selectedLocale">
+  <DropdownButton :formControl="'selectedLocale'">
     <items>
       <DropdownMenuItem value="'ar'">
         <Text text="'العربية'" />

src/generators/class-generator.ts

@@ -137,15 +137,18 @@ export class ClassCodeGenerator {
 
 class ${rootWidget.controller}Base {
   bool _loaded = false;
-  bool _controllerAttached = false;
+	Map<String, dynamic> _attachedControllers = Map();
   ${varsLines.join('\n  ')}
 
-  void _attachFormControllers(${formControls.map(a => `${a.controller}`).join(',\n      ')}) {
-    if (_controllerAttached) {
-      return;
+  dynamic _attachController(String controlName, controllerBuilder) {
+    if (_attachedControllers.containsKey(controlName)) {
+			final controller = _attachedControllers[controlName];
+      return controller;
     }
-    _controllerAttached = true;
-    ${formControls.map(a => `${a.name}.attachTextEditingController(${a.controller});`).join('\n    ')}
+		final controller = controllerBuilder();
+    _attachedControllers[controlName] = controller;
+    formGroup.get(controlName).attachTextEditingController(controller);
+		return controller;
   }
 
   void _load(BuildContext context) {
@@ -196,7 +199,6 @@ class ${widgetName} extends StatelessWidget${mixinsCode} {
             ...rootWidget.vars.map(a => `${a.type} ${a.name};`),
             ...(routeAware ? [`RouteObserver<Route> _routeObserver;`] : [])
         ];
-        const attachFormControllersCode = `ctrl._attachFormControllers(${formControls.map(a => `${a.controller}`).join(',\n      ')});`;
         const stateVarsInit: string[] = [
             ...(hasController ? [`ctrl = new ${rootWidget.controller}();`] : []),
             ...rootWidget.params.map(a => `ctrl._${a.name} = widget.${a.name};`),
@@ -231,7 +233,7 @@ class _${widgetName}State extends State<${widgetName}>${mixinsCode} {
   void didChangeDependencies() {
     super.didChangeDependencies();${routeAware ? `\n    _routeObserver = Provider.of<RouteObserver<Route>>(context)..subscribe(this, ModalRoute.of(context));` : ''}
     ${rootWidget.providers.map(a => `${hasController ? `ctrl._${a.name} = `: ''}${a.name} = Provider.of<${a.type}>(context);`).join('\n  ')}
-    ${hasController ? `ctrl._load(context);\n    ${attachFormControllersCode}` : ''}
+    ${hasController ? `ctrl._load(context);` : ''}
   }
 
   @override

src/property-handlers/form-control.ts

@@ -27,7 +27,8 @@ export class FormControlHandler extends CustomPropertyHandler {
             type: 'FormGroup'
         });
 
-        const formControlName = `${formGroupName}.get('${attr.value}')`;
+        const name = attr.value;
+        const formControlName = `${formGroupName}.get(${name})`;
         // const formControlName = `${attr.value}FormControl`;
         // targetWidget.vars.push({
         //     name: `FormControl get ${attr.value}FormControl => ${formGroupName}.get('${attr.value}');`,
@@ -39,17 +40,17 @@ export class FormControlHandler extends CustomPropertyHandler {
         if (['TextField', 'TextFormField'].filter(a => a === targetWidget.type).length === 1) {
             addLocalVar = false;
             const controllerName = element.attributes['controller'] ? element.attributes['controller'].split(' ')[1] : '';
-            const privateControllerName = `${formGroupName}${attr.value[0].toUpperCase()}${attr.value.length > 1 ? attr.value.substring(1) : ''}Controller`;
+            const privateControllerName = `ctrl._attachController(${name}, ${controllerName || '() => TextEditingController()'})`;
 
             if (!controllerName) {
                 // only add controller if there is no one present
                 targetWidget.properties.push({
                     dataType: 'object',
-                    controller: {
-                        name: privateControllerName,
-                        type: 'TextEditingController',
-                        isPrivate: true
-                    },
+                    // controller: {
+                    //     name: privateControllerName,
+                    //     type: 'TextEditingController',
+                    //     isPrivate: true
+                    // },
                     value: privateControllerName,
                     name: 'controller'
                 });

src/property-handlers/form.test.ts

@@ -85,7 +85,7 @@ suite("Forms", function () {
 
     test(":formControl with :width wrapper", function() {
         const xml = `
-<TextField :formControl="quantity" :width="80" />
+<TextField :formControl="'quantity'" :width="80" />
 `;
 
         const expected = `
@@ -96,7 +96,7 @@ suite("Forms", function () {
             return SizedBox(
               width: 80,
               child: TextField(
-                controller: formGroupQuantityController
+                controller: ctrl._attachController('quantity', () => TextEditingController())
               )
             );
           }

src/property-handlers/if-element.test.ts

@@ -348,7 +348,7 @@ Container(
     <Text text="'if'" />
   </if>
   <elseIf value="ifElseCondition | stream">
-    <TextField :formControl="test">
+    <TextField :formControl="'test'">
     </TextField>
   </elseIf>
   <else>
@@ -389,7 +389,7 @@ Container(
                           stream: ctrl.formGroup.get('test').valueStream,
                           builder: (BuildContext context, ctrlFormGroupGetTestValueStreamSnapshot) {
                             return TextField(
-                              controller: formGroupTestController
+                              controller: ctrl._attachController('test', () => TextEditingController())
                             );
                           }
                         )