Fazendo Submit
Da mesma forma que nos exemplos para o template driven, e possivel realizar o submit do formulario atravez da diretiva ngSubmit
<!--adicionado a diretiva ngSubmit-->
<form class="form-horizontal" [formGroup]="formulario" (ngSubmit)="onSubmit()">
<div class="form-group">
<div class="col-sm-12">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" placeholder="Insira o nome"
formControlName="nome" required/>
</div>
<div class="col-sm-12">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email" placeholder="Insira o e-mail"
formControlName="email" required email/>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<app-form-debug [formulario]="formulario"></app-form-debug>
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-data-driven-form',
templateUrl: './data-driven-form.component.html',
styleUrls: ['./data-driven-form.component.css']
})
export class DataDrivenFormComponent implements OnInit {
public formulario: FormGroup
constructor(private formBuilder: FormBuilder, private http: HttpClient) { }
ngOnInit(): void {
this.formulario = this.formBuilder.group({
nome: [null],
email: [null]
})
}
public onSubmit(): void {
console.log(this.formulario);
console.log(this.formulario.value);
this.http.post('enderecoServidor/formUsuario', JSON.stringify(this.formulario.value))
.subscribe(response => console.log(response))
}
}