Merge pull request #138 from jogelin/issue-137

Author: NetanelBasal

apps/playground/src/app/app.component.html

@@ -1,16 +1,23 @@
 <form [formGroup]="group">
-  {{ group.value | json }}
+  <pre>{{ group.value | json }}</pre>
 
   <input type="text" [formControl]="group.controls.foo" />
 </form>
 
 
 <form [formGroup]="build">
-  {{ build.value | json }}
+  <pre>{{ build.value | json }}</pre>
 
+  <label>name:</label>
   <input type="text" [formControl]="build.controls.name" />
 
   <div formGroupName="address">
-    <input type="text" formControlName="street">
+    <label>Street:</label>
+    <input type="text" formControlName="street" />
   </div>
-</form>
+
+  <ng-container *ngFor="let _ of build.controls.profiles.controls; index as i">
+    <label>Profile name:</label>
+    <pre>{{ build.controls.profiles.controls[i].value | json }}</pre>
+  </ng-container>
+</form>

apps/playground/src/app/app.component.ts

@@ -1,6 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { Validators } from '@angular/forms';
-import { FormGroup, FormControl, ControlsOf, FormArray, FormBuilder } from '@ngenat/reactive-forms';
+import {
+  FormGroup,
+  FormControl,
+  ControlsOf,
+  FormArray,
+  FormBuilder,
+  ValuesOf,
+} from '@ngneat/reactive-forms';
+import { User, UserForm } from './user.interfaces';
 
 interface Props {
   foo: string;
@@ -36,16 +44,36 @@ export class AppComponent implements OnInit {
     arr: new FormArray([]),
   });
 
-  build = this.builder.group({
+  build = this.builder.group<UserForm>({
     name: '',
     address: this.builder.group({
-      street: ['', Validators.required]
-    })
-  })
+      street: ['', Validators.required],
+    }),
+    profiles: this.builder.array([]),
+  });
 
-  constructor(private builder: FormBuilder) { }
+  constructor(private builder: FormBuilder) {}
 
   ngOnInit() {
+    const user: User = {
+      name: 'My User',
+      address: {
+        street: 'street one',
+      },
+      profiles: [
+        { name: 'Profile One', permissions: ['Can', 'View'] },
+        { name: 'Profile Two', permissions: ['Cannot', 'Edit'] },
+      ],
+    };
+
+    // This is to check that ValuesOf takes in account the Control type of a FormArray
+    const valueOfUser: ValuesOf<UserForm> = user;
+
+    valueOfUser.profiles.forEach((profile) =>
+      this.build.controls.profiles.push(new FormControl(profile))
+    );
+    this.build.setValue(valueOfUser);
+
     console.log(1);
   }
 }

apps/playground/src/app/demo/demo.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@ngenat/reactive-forms';
+import { FormControl, FormGroup } from '@ngneat/reactive-forms';
 
 @Component({
   selector: 'ngneat-demo',

apps/playground/src/app/user.interfaces.ts

@@ -0,0 +1,26 @@
+import { FormArray, FormControl, FormGroup } from '@ngneat/reactive-forms';
+
+export interface UserAddress {
+  street: string;
+}
+
+export interface UserProfiles {
+  name: string;
+  permissions: string[];
+}
+
+export interface User {
+  name: string;
+  address: UserAddress;
+  profiles: UserProfiles[];
+}
+
+export interface UserAddressForm {
+  street: FormControl<string>;
+}
+
+export interface UserForm {
+  name: string;
+  address: FormGroup<UserAddressForm>;
+  profiles: FormArray<UserProfiles, FormControl<UserProfiles>>;
+}

libs/reactive-forms/src/index.ts

@@ -2,7 +2,7 @@ export { FormGroup } from './lib/form-group';
 export { FormControl } from './lib/form-control';
 export { FormArray } from './lib/form-array';
 export { FormBuilder } from './lib/form-builder';
-export { ControlsOf } from './lib/types';
+export { ControlsOf, ValuesOf } from './lib/types';
 export { diff } from './lib/operators/diff';
 export { LocalStorageManager, persistControl, restoreControl, PersistManager, SessionStorageManager } from './lib/persist/persist';
-export { ControlValueAccessor } from './lib/control-value.accessor';
+export { ControlValueAccessor } from './lib/control-value.accessor';

libs/reactive-forms/src/lib/form-builder.ts

@@ -21,7 +21,7 @@ export class FormBuilder extends NgFormBuilder {
     asyncValidator?: ConstructorParameters<typeof FormArray>[2]) {
     const controls = controlsConfig.map(c => (this as any)._createControl(c));
 
-    return new FormArray<T>(controls, validatorOrOpts, asyncValidator);
+    return new FormArray<T,Control>(controls, validatorOrOpts, asyncValidator);
   }
 
 

libs/reactive-forms/src/lib/types.ts

@@ -5,7 +5,7 @@ import { AbstractControl } from '@angular/forms';
 
 type NonUndefined<T> = T extends undefined ? never : T;
 
-// This type is **Experimental** 
+// This type is **Experimental**
 export type ControlsOf<T extends Record<string, any>> = {
   [K in keyof T]: NonUndefined<T[K]> extends AbstractControl ? T[K] : NonUndefined<T[K]> extends (infer R)[]
   ? FormArray<R>
@@ -19,7 +19,7 @@ export type ValuesOf<T extends ControlsOf<any>> = {
   ? R
   : NonUndefined<T[K]> extends FormGroup<infer R>
   ? ValuesOf<R>
-  : NonUndefined<T[K]> extends FormArray<infer R> ? R[] : NonUndefined<T[K]>;
+  : NonUndefined<T[K]> extends FormArray<infer R, infer C> ? R[] : NonUndefined<T[K]>;
 };
 
 export type DeepPartial<T> = {

tsconfig.base.json

@@ -16,7 +16,7 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@ngenat/reactive-forms": ["libs/reactive-forms/src/index.ts"]
+      "@ngneat/reactive-forms": ["libs/reactive-forms/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]