Bueno, mi código es bastante simple, pero no sé cómo pasar los nombres para alertar primero, si descubro esto, podría pasarlos al backend (probablemente).
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>t:
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(){ } }Para ver la forma reactiva, consulte este enlace "https://www.tektutorialshub.com/angular/angular-reactive-forms/"
OR marque el código a continuación
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); } }