Learning Angular and Forms

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-layout.component'
import { LoginInuptLayoutComponent } from '../../components/login-input-layout/login-input-layout.component'
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-page.component.html',
styleUrl: './login-page.component.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>Forgot 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-layout.component.html',
styleUrl: './login-input-layout.component.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-layout.component.html',
styleUrl: './login-default-layout.component.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

Continue reading...