Si da este error:
Error: formGroup expects a FormGroup instance. Please pass one in...
en el constructor, en la primer linea, inicializar el formulario:
ej:
this.clienteForm = this.fb.group({
id: [""],
numero: new FormControl({value: null, disabled: false}),
nombre: [""],
direccion: [""],
telefono: [""],
email: [""],
fechaNacimiento: [""]
});
Si no se hace, por un tema de asincronia, trata de utilizar el form que aun no esta inicializado y da el error.
Mostrando entradas con la etiqueta reactiveforms. Mostrar todas las entradas
Mostrando entradas con la etiqueta reactiveforms. Mostrar todas las entradas
Crear formulario con FormBuilder ReactiveForms en Angular 5
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
this.crearForm();
}
crearForm() {
this.loginForm = this.fb.group({
usuario: ['texto precargado', Validators.required],
password: ['']
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, ValidatorFn, AbstractControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
this.crearForm();
}
crearForm() {
this.loginForm = this.fb.group({
usuario: ['texto precargado', Validators.required],
password: ['']
});
}
}
app.component.html
<form [formGroup]="loginForm" (ngSubmit)="submit()">
<input formControlName="usuario">
<input formControlName="password">
<button type="submit" [disabled]="!loginForm.valid">Enviar</button>
</form>
Suscribirse a:
Entradas (Atom)