How to pass First Second and Last name to alert in onClick event?-CodePudding

Well my code is pretty simple, yet i don't know how to pass the names to alert first, if i figure this out, i might be able to pass them to backend(probably)..

html:

<div class="container">
  <h1>Update Account Info</h1>
  <form>
    <label for="firstName">First Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="firstName">
    </div>
    <label for="secondName">Second Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="secondName">
    </div>
    <label for="lastName">Last Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="lastName">
    </div>
    <button (click)="onClick($event)" class="update-btn" id="update-btn">Update</button>
   </form>
 </div>

ts:

import { IdToken } from '@azure/msal-common';
@Component({
  selector: 'edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.scss']
})
export class EditProfileComponent implements OnInit {
  constructor() { }
  ngOnInit() {

  }
  onClick(){

}
}

CodePudding user response：

For reactive form check this link "https://www.tektutorialshub.com/angular/angular-reactive-forms/"

OR Check Below code

HTML Code

<div class="container">
  <h1>Update Account Info</h1>
  <form>
    <label for="firstName">First Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="firstName" [(ngModel)]="formData.firstName">
    </div>
    <label for="secondName">Second Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="secondName" [(ngModel)]="formData.secondName">
    </div>
    <label for="lastName">Last Name </label>
    <div class="form-group">
      <input type="text" class="form-control" id="lastName" [(ngModel)]="formData.lastName">
    </div>
    <button (click)="onClick()" class="update-btn" id="update-btn">Update</button>
   </form>
 </div>

TS File Code

export class EditProfileComponent implements OnInit {
    public formData = {
        firstName:'',
        secondName:'',
        lastName:'',
      }
    
    constructor() { }
      ngOnInit() {}
      onClick(){
          console.log(this.formData);
      }
}