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

<box>

   <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>

   Predefinição:FormCliente.value

<box>