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: ['']               
    });
  }
}

app.component.html

<form [formGroup]="loginForm" (ngSubmit)="submit()">
  <input formControlName="usuario">
  <input formControlName="password">

  <button type="submit" [disabled]="!loginForm.valid">Enviar</button>
</form>

No hay comentarios:

Publicar un comentario