title: Angular 14 strictly typed reactive forms - How to type FormGroup model using existing interface
body: <p>I'm just playing around with new angular typed forms api and couldn't figure out how to type <code>FormGroup</code> without declaring specific &quot;FormInterface&quot; witch has to match the original one.</p>
  <p>Maybe I'm missing something or it's just impossible to do so.</p>
  <p>I was able to make thing working correctly (example below), but what I'm not a fan of here is declaration of <code>UserForm</code> interface witch has no reference to <code>User</code> interface and has to be a mirror copy of it but with <code>FormControl&lt;&gt;</code> fields.</p>
  <p>Is it possible in case like this to type <code>FormGroup</code> just with <code>User</code> interface?.</p>
  <p>Full working example available on <a href="https://stackblitz.com/edit/angular-ivy-zkxz54" rel="noreferrer">stackblitz</a></p>
  <p><strong>user.model.ts</strong></p>
  <pre><code>export interface User {
    firstName: string;
    lastName: string;
    email: string;
    age: number | null;
  }
  </code></pre>
  <p><strong>user.service.ts</strong></p>
  <pre><code>@Injectable()
  export class UserService {
  
    add(user: User): void {
      console.log('Add user', user);
    }
  
  }
  </code></pre>
  <p><strong>app.component.ts</strong></p>
  <pre><code>interface UserForm {
    firstName: FormControl&lt;string&gt;;
    lastName: FormControl&lt;string&gt;;
    email: FormControl&lt;string&gt;;
    age: FormControl&lt;number | null&gt;;
  }
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
  })
  export class AppComponent implements OnInit {
    form: FormGroup&lt;UserForm&gt;;
  
    constructor(private userService: UserService) {}
  
    ngOnInit(): void {
      this.form = new FormGroup({
        firstName: new FormControl&lt;string&gt;('', { nonNullable: true }),
        lastName: new FormControl('', { nonNullable: true }),
        email: new FormControl('', { nonNullable: true }),
        age: new FormControl&lt;number | null&gt;(null),
      });
    }
  
    submitForm(): void {
      this.userService.add(this.form.getRawValue());
    }
  }
  </code></pre>