this is my login-component.html

<div >
  <label [ngClass]="focused ? 'label-focused' : ''">{{label}}</label>
  <input [type]="type" (focus)="focused = true" (blur)="onBlur($event)" >
</div>

and my login-component.ts

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


@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
})
export class InputComponent  {
  @Input() label : string;
  @Input() type : string; 
  @Input() name:string


  focused : boolean


  onBlur(event:any){
    const value = event.target.value
    if(!value){
      this.focused = false
    }
  }

}

I have made input as global component and same the button as global component. and I'm using this component on my login page the code for login page
login.ts

export class LoginPage implements OnInit {

focused: boolean

  constructor() { }

  ngOnInit() {
  }

  onBlur(event:any){
    const value = event.target.value

    if(!value){
      this.focused = false
    }
  }

  

}

and Login.html is :

<ion-content >
  <h1>Welcome</h1>
  <h3>Sign in to continue</h3>
  <form [formGroup]="loginForm" (ngSubmit)="onLogin()"> 
    <app-input label="Email Id" type="text" ></app-input>
    <app-input label="Password" type="password" ></app-input>
    <a routerLink="#" >Forget Password?</a>
    <app-button label="Login" ></app-button>
    <app-icon-button icon="" src="../../../assets/img/svg/Google__G__Logo.svg" label="Connect using Google">
    </app-icon-button>
  </form>
  <p >I'm new user <a routerLink="/register">Sign Up</a></p>
</ion-content>

and I have achieved this enter image description here

Now my problem is to take the values from the inputs on login page and use it but I'm beginner so don't getting and idea how to get the values and use it for login . Please anyone can tell me how to do this.

CodePudding user response：

If I understand correctly, you basically want to create custom form controls and bind them to your original form. To do this you will have to use the ControlValueAccessor and Validator interfaces.

Here is a StackBlitz demo of something similar to what you're trying to do. Focus on the required-field component and how this is used inside the main form.

You can read a detailed explanation of how all this works in this article.

CodePudding user response：

Looking at your code you have added a form group on the form element but it is not initialized in your component file, I am assuming you have setup reactive forms,

you can create a form group in your LoginPage component

loginForm = new FormGroup({
    email: new FormControl('', []),
    password: new FormControl('', []),
  })

add a new input decorator in your InputComponent to get a form control

@Input() control:FormControl

add the control to the input field in login-component.html

<div >
  <label [ngClass]="focused ? 'label-focused' : ''">{{label}}</label>
  <input [type]="type" (focus)="focused = true" (blur)="onBlur($event)" [formControl]="control">
</div>

once you have set up the Input Component, you need to bind the email and password form controls to the app-input element in login.htm

<form [formGroup]="loginForm" (ngSubmit)="onLogin()"> 

    <app-input label="Email Id" type="text"[control]="loginForm.get('email')"></app-input>
    <app-input label="Password" type="password" [control]="loginForm.get('password')"></app-input>

    <a routerLink="#" >Forget Password?</a>
    <app-button label="Login" ></app-button>
    <app-icon-button icon="" src="../../../assets/img/svg/Google__G__Logo.svg" label="Connect using Google">
    </app-icon-button>
  </form>

now that your inputs are linked to a form control you can subscribe to valuechanges to get the text entered in the input fields

This is how your login page component should look like with all the above changes

export class LoginPage implements OnInit {

  loginForm = new FormGroup({
    email: new FormControl('', []),
    password: new FormControl('', []),
  })

  constructor() { }

  ngOnInit() {
    this.loginForm.get('email').valueChanges.subscribe(email => {
      // Do what you want with the email entered in the input field
    })
    
    this.loginForm.get('password').valueChanges.subscribe(password => {
      // Do what you want with the password entered in the input field
    })
    })

  }  
}

you can read more about reactive forms here, https://angular.io/guide/reactive-forms

Hope this helps