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(){
}
}
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);
}
}