How to <app-my-login-form #form="ngForm"> instead of #form accessing MyLoginFormComponent

Question

PROBLEM: Produces error "No directive found with exportAs 'ngForm'"

When accessing this.form in App.component.ts I would like to have an instance of the FromGroupControl instead of the LoginFormComponent.

This looks like a common use case for which I have not found any solution yet.

LoginForm.component.html

<form #form="ngForm">
    <div class="row form-group">
        <div class="col-xs-12 col-md-2">
            <label for="username">Username</label>
        </div>
        <div class="col-xs-12 col-md-10">
            <input type="text" class="form-control" name="username" id="username" [ngModel]="username" />
        </div>
    </div>
    <div class="row form-group">
        <div class="col-xs-12 col-md-2">
            <label for="password">password</label>
        </div>
        <div class="col-xs-12 col-md-10">
            <input type="password" class="form-control" name="password" id="password" [ngModel]="password" />
        </div>
    </div>
</form>

LoginForm.component.ts

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

@Component({
    selector: 'app-login-form',
    templateUrl: './login-form.component.html',
    styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
    @ViewChild('form') form!: NgForm

    @Input() username = ''
    @Input() password = ''
}

App.component.html

<app-login-form #form="ngForm" />

I have imported both FormsModule and ReactiveFormsModule in "app.module.ts".

Is this a use case for a custom ControlValueAccessor?

Expectations: ngForm referring to the inner form in LoginComponent.component.html.

Edit: I could code

get value() {
    return this.form.value
}

in "LoginFormComponent.ts"

but this seems like a work around, perhaps what I want is my loginFormComponent to be a custom formControl, but then I'm in need for some examples.

Answer 1

After a bit more of searching stackoverflow I was able to expose <app-login-form as a FormGroup

this question in particular was very helpfull stacckoverflow post

I can now use

<form #content="ngForm" [formGroup]="form">
        <app-login-form [formGroup]="form" [username]="username" [password]="password" />
    </form>

my <app-login-form as a child component of a larger form.