Angular:FormBuild

TS

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import { SocialChangePassword } from 'src/app/000_class/social-change-password'; import { BrapciService } from 'src/app/000_core/010_services/brapci.service';

@Component({

selector: 'app-change-password',
templateUrl: './change-password.component.html',

}) export class ChangePasswordComponent {

formCliente: FormGroup<any> | any;
apikey:string = 
parms:Array<any>|any

ngOnInit() {

this.createForm(new SocialChangePassword());

this.parms = this.route.params.subscribe((params) => { this.apikey = params['id']; // (+) converts string 'id' to a number this.formCliente.controls['apikey'].setValue(this.apikey);

});

}

constructor(

private formBuilder: FormBuilder, private brapciService: BrapciService, private route: ActivatedRoute

) {}

createForm(cliente: SocialChangePassword) {

this.formCliente = this.formBuilder.group({ pass1: [cliente.pass1], pass2: [cliente.pass2], apikey: [cliente.apikey], });

}

onSubmit() {

// aqui você pode implementar a logica para fazer seu formulário salvar console.log(this.formCliente.value);

// chamando a função createForm para limpar os campos na tela this.createForm(new SocialChangePassword());

}

}

html

<form [formGroup]="formCliente" (ngSubmit)="onSubmit()">

<label for="dataNascimento">Informe a nova senha</label> <input type="text" class="form-control" name="pass1" id="pass1" formControlName="pass1">

<label for="pass2">Confirme nova senha</label> <input type="text" class="form-control" name="pass2" id="pass2" formControlName="pass2">

<input type="submit" class="btn btn-outline-primary me-2" value="Salvar"> <a href="#" class="btn btn-outline-secondary me-2">Cancelar</a>

</form>