Mudanças entre as edições de "Angular:FormBuild"
(Criou página com '==TS== import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { ActivatedRoute } from '@angular/rou...') |
(→TS) |
||
| Linha 7: | Linha 7: | ||
@Component({ | @Component({ | ||
| − | + | selector: 'app-change-password', | |
| − | + | templateUrl: './change-password.component.html', | |
}) | }) | ||
export class ChangePasswordComponent { | export class ChangePasswordComponent { | ||
| − | + | formCliente: FormGroup<any> | any; | |
| − | + | apikey:string = '' | |
| − | + | parms:Array<any>|any | |
| − | + | ngOnInit() { | |
this.createForm(new SocialChangePassword()); | this.createForm(new SocialChangePassword()); | ||
this.parms = this.route.params.subscribe((params) => { | 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 formBuilder: FormBuilder, | ||
private brapciService: BrapciService, | private brapciService: BrapciService, | ||
private route: ActivatedRoute | private route: ActivatedRoute | ||
| − | + | ) {} | |
| − | + | createForm(cliente: SocialChangePassword) { | |
this.formCliente = this.formBuilder.group({ | 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 | // aqui você pode implementar a logica para fazer seu formulário salvar | ||
console.log(this.formCliente.value); | console.log(this.formCliente.value); | ||
| Linha 46: | Linha 46: | ||
// chamando a função createForm para limpar os campos na tela | // chamando a função createForm para limpar os campos na tela | ||
this.createForm(new SocialChangePassword()); | this.createForm(new SocialChangePassword()); | ||
| − | + | } | |
} | } | ||
Edição das 11h24min de 25 de fevereiro de 2024
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>
