Dice No se puede encontrar el nombre 'FormGroup' en el archivo TS: Hice todo correctamente. ¿Alguien puede ayudarme con este código? No sé qué es lo que está mal con este código. código TS
import { Component, OnInit } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-register-form', templateUrl: './register-form.component.html', styleUrls: ['./register-form.component.css'] }) export class RegisterFormComponent implements OnInit { userForm: FormGroup; constructor(private formBuilder: FormBuilder) { } ngOnInit(): void { this.userForm = this.formBuilder.group({ firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]], lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]], email: ['', [Validators.required, Validators.email]] }); } onSubmit(){ if(this.userForm.valid){ alert('User form is valid!!') } else { alert('User form is not valid!!') } } }Mi código html:
<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="text-center border border-light p-5"> <p class="h4 mb-4">Sign up</p> <div class="form-group col"> <div class="form-row"> <div class="form-row mb-4"> <div class="col"> <input type="text" formControlName="firstName" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name"> </div> <div class="col"> <input type="text" formControlName="lastName" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name"> </div> </div> </div> </div> <input type="email" formControlName="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail"> <button class="btn btn-info my-4 btn-block" type="submit">Sign in</button> <hr> </form>Encontré este problema en muchas preguntas en stackoverflow pero no tuve suerte. Por favor, ayúdenme a descubrir qué estoy haciendo mal.
No sé si este es todo tu código, pero tal vez te estás perdiendo esta importación porque no la veo.
import {FormControl, FormGroup} from '@angular/forms';Debe iniciar formbuilder después de cargar la vista.
import {FormControl, FormGroup} from '@angular/forms'; ngAfterViewInit(){ this.userForm = this.formBuilder.group({ firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z]+$')]], lastName: ['',[Validators.required, Validators.pattern('^[a-zA-Z]+$')]], email: ['', [Validators.required, Validators.email]] }); }