I'm learning Angular and I'm doing well but I got stuck in the Forms part! So, When I wanted disable to be true when my form was valid I realized that I was not passing the values ​​to it, I would like to know I followed the documentation to some extent it worked

This is my LoginPage module:

import { Component } from '@angular/core'
import { LoginDefaultLayoutComponent } from '../../components/login-default-layout/login-default-layoutponent'
import { LoginInuptLayoutComponent } from '../../components/login-input-layout/login-input-layoutponent'
import {
    FormControl,
    FormGroup,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms'

interface LoginForm {
    email: FormControl
    password: FormControl
}

@Component({
    selector: 'app-login-page',
    imports: [
        LoginDefaultLayoutComponent,
        LoginInuptLayoutComponent,
        ReactiveFormsModule,
    ],
    templateUrl: './login-pageponent.html',
    styleUrl: './login-pageponent.scss',
})
export class LoginPageComponent {
    loginForm!: FormGroup<LoginForm>

    constructor() {
        this.loginForm = new FormGroup({
            email: new FormControl('', [Validators.required, Validators.email]),
            password: new FormControl('', [
                Validators.required,
                Validators.minLength(3),
            ]),
        })
    }

    submit() {
        console.log(this.loginForm.valid)
        console.log(this.loginForm.value)
    }
}

<app-login-default-layout
    tittle="Welcome back"
    subtittle="Welcome back! Please enter your details."
    (submit)="submit()"
    [disablePrimaryButton]="!loginForm.valid"
>
    <form (ngSubmit)="submit()" [formGroup]="loginForm">
        <app-login-inupt-layout
            placeholder="Enter your email"
            formGroupName="email"
            inputLabel="Email"
            inputType="email"
            inputName="email"
            formName="email"
        >
        </app-login-inupt-layout>
        <app-login-inupt-layout
            placeholder="Enter your password"
            formGroupName="password"
            inputLabel="Password"
            inputType="password"
            inputName="password"
        >
            <div class="checkboxWrapper">
                <div>
                    <input type="checkbox" />
                    <span>Remember me</span>
                </div>
                <span>Fot password</span>
            </div>
        </app-login-inupt-layout>
    </form>
</app-login-default-layout>

this is my input module:

import { Component, Input } from '@angular/core'

type InputType = 'text' | 'password' | 'email'

@Component({
    selector: 'app-login-inupt-layout',
    imports: [],
    templateUrl: './login-input-layoutponent.html',
    styleUrl: './login-input-layoutponent.scss',
})
export class LoginInuptLayoutComponent {
    @Input() inputLabel: string = ''
    @Input() placeholder: string = ''
    @Input() inputName: string = ''
    @Input() inputType: InputType = 'text'
    @Input() formName: string = ''
}

<div class="login-container">
    <div class="form-input">
        <label [for]="inputName">{{ inputLabel }}</label>
        <input
            [placeholder]="placeholder"
            [id]="inputName"
            [type]="inputType"
        />
    </div>
    <ng-content></ng-content>
</div>

and this is my login-layout module:

import { Component, EventEmitter, Input, Output } from '@angular/core'

@Component({
    selector: 'app-login-default-layout',
    imports: [],
    templateUrl: './login-default-layoutponent.html',
    styleUrl: './login-default-layoutponent.scss',
})
export class LoginDefaultLayoutComponent {
    @Input() tittle: string = ''
    @Input() subtittle: string = ''
    @Output('submit') onSubmit = new EventEmitter()
    @Input() disablePrimaryButton: boolean = true

    submit() {
        this.onSubmit.emit()
    }
}

<main>
    <section class="primary-section">
        <h1>{{ tittle }}</h1>
        <h2>{{ subtittle }}</h2>
        <!-- switch for dinamic code -->
        <ng-content></ng-content>
        <div class="buttonWrapper">
            <button
                [disabled]="disablePrimaryButton"
                (click)="submit()"
                class="primary-btn"
            >
                Login
            </button>
            <button class="secondary-btn">
                <img src="Google.svg" alt="GOOGLE ICON" />Sign in with Google
            </button>
        </div>
        <div class="spanWrapper">
            <span>Don't have an account?</span>
            <span><button>Sign up for free!</button></span>
        </div>
    </section>
    <section class="secondary-section">
        <img src="Main.svg" />
    </section>
</main>

I tried learn the documentation, and what i was expecting is that the value of my input go to my form or show in console but i dont know how to do that

I'm learning Angular and I'm doing well but I got stuck in the Forms part! So, When I wanted disable to be true when my form was valid I realized that I was not passing the values ​​to it, I would like to know I followed the documentation to some extent it worked

This is my LoginPage module:

import { Component } from '@angular/core'
import { LoginDefaultLayoutComponent } from '../../components/login-default-layout/login-default-layoutponent'
import { LoginInuptLayoutComponent } from '../../components/login-input-layout/login-input-layoutponent'
import {
    FormControl,
    FormGroup,
    ReactiveFormsModule,
    Validators,
} from '@angular/forms'

interface LoginForm {
    email: FormControl
    password: FormControl
}

@Component({
    selector: 'app-login-page',
    imports: [
        LoginDefaultLayoutComponent,
        LoginInuptLayoutComponent,
        ReactiveFormsModule,
    ],
    templateUrl: './login-pageponent.html',
    styleUrl: './login-pageponent.scss',
})
export class LoginPageComponent {
    loginForm!: FormGroup<LoginForm>

    constructor() {
        this.loginForm = new FormGroup({
            email: new FormControl('', [Validators.required, Validators.email]),
            password: new FormControl('', [
                Validators.required,
                Validators.minLength(3),
            ]),
        })
    }

    submit() {
        console.log(this.loginForm.valid)
        console.log(this.loginForm.value)
    }
}

<app-login-default-layout
    tittle="Welcome back"
    subtittle="Welcome back! Please enter your details."
    (submit)="submit()"
    [disablePrimaryButton]="!loginForm.valid"
>
    <form (ngSubmit)="submit()" [formGroup]="loginForm">
        <app-login-inupt-layout
            placeholder="Enter your email"
            formGroupName="email"
            inputLabel="Email"
            inputType="email"
            inputName="email"
            formName="email"
        >
        </app-login-inupt-layout>
        <app-login-inupt-layout
            placeholder="Enter your password"
            formGroupName="password"
            inputLabel="Password"
            inputType="password"
            inputName="password"
        >
            <div class="checkboxWrapper">
                <div>
                    <input type="checkbox" />
                    <span>Remember me</span>
                </div>
                <span>Fot password</span>
            </div>
        </app-login-inupt-layout>
    </form>
</app-login-default-layout>

this is my input module:

import { Component, Input } from '@angular/core'

type InputType = 'text' | 'password' | 'email'

@Component({
    selector: 'app-login-inupt-layout',
    imports: [],
    templateUrl: './login-input-layoutponent.html',
    styleUrl: './login-input-layoutponent.scss',
})
export class LoginInuptLayoutComponent {
    @Input() inputLabel: string = ''
    @Input() placeholder: string = ''
    @Input() inputName: string = ''
    @Input() inputType: InputType = 'text'
    @Input() formName: string = ''
}

<div class="login-container">
    <div class="form-input">
        <label [for]="inputName">{{ inputLabel }}</label>
        <input
            [placeholder]="placeholder"
            [id]="inputName"
            [type]="inputType"
        />
    </div>
    <ng-content></ng-content>
</div>

and this is my login-layout module:

import { Component, EventEmitter, Input, Output } from '@angular/core'

@Component({
    selector: 'app-login-default-layout',
    imports: [],
    templateUrl: './login-default-layoutponent.html',
    styleUrl: './login-default-layoutponent.scss',
})
export class LoginDefaultLayoutComponent {
    @Input() tittle: string = ''
    @Input() subtittle: string = ''
    @Output('submit') onSubmit = new EventEmitter()
    @Input() disablePrimaryButton: boolean = true

    submit() {
        this.onSubmit.emit()
    }
}

<main>
    <section class="primary-section">
        <h1>{{ tittle }}</h1>
        <h2>{{ subtittle }}</h2>
        <!-- switch for dinamic code -->
        <ng-content></ng-content>
        <div class="buttonWrapper">
            <button
                [disabled]="disablePrimaryButton"
                (click)="submit()"
                class="primary-btn"
            >
                Login
            </button>
            <button class="secondary-btn">
                <img src="Google.svg" alt="GOOGLE ICON" />Sign in with Google
            </button>
        </div>
        <div class="spanWrapper">
            <span>Don't have an account?</span>
            <span><button>Sign up for free!</button></span>
        </div>
    </section>
    <section class="secondary-section">
        <img src="Main.svg" />
    </section>
</main>

I tried learn the documentation, and what i was expecting is that the value of my input go to my form or show in console but i dont know how to do that

• angular

• could you please reword the question? I don't think it is clear what exactly is going wrong – Andrei Commented Feb 21 at 9:00

1 Answer 1

If you want to use your custom component with formControlName, you need to implement ControlValueAccessor to your form. You can read the docs from here