FormGroup: Cannot read property 'valid' of undefined

@juuny wrote:

I have written the following code:
html

<ion-grid>
	<ion-row justify-content-center>
		<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">

			<form [formGroup]="userForm" (submit)="saveProfile()" padding novalidate>
				<ion-item>
				    <ion-icon name="mail" item-start></ion-icon>
					<ion-input type="text" formControlName="firstName" placeholder="Nome" 
					[class.invalid]="!userForm.controls.firstName.valid && userForm.controls.firstName.dirty" clearInput></ion-input>
				</ion-item>
				<ion-item no-lines class="error-message" *ngIf="!userForm.controls.firstName.valid  && userForm.controls.firstName.dirty">
					<p style="font-size: 1rem; color: red">Invalid name.</p>
				</ion-item>
				<ion-item>
				    <ion-icon name="mail" item-start></ion-icon>
					<ion-input type="text" formControlName="lastName" placeholder="Sobrenome" 
					[class.invalid]="!userForm.controls.lastName.valid && userForm.controls.lastName.dirty" clearInput></ion-input>
				</ion-item>
				<ion-item no-lines class="error-message" *ngIf="!userForm.controls.lastName.valid  && userForm.controls.lastName.dirty">
					<p style="font-size: 1rem; color: red">Invalid last name.</p>
				</ion-item>
				<ion-item>
					<ion-label>Data de Nascimento</ion-label>
					<ion-datetime displayFormat="DD/MM/YYYY" formControlName="dateOfBirth" pickerFormat="DD MM YYYY" min="1920" max="{{year}}">
					</ion-datetime>
				</ion-item>
				<div padding style="text-align: center">
					<button ion-button middle round  class="button-custom" style="width: 100%" type="submit" [disabled]="!userForm.valid">Próximo</button>
				</div>
			</form>
		</ion-col>
	</ion-row>
</ion-grid>  

ts

import { Component } from '@angular/core';
import { NavController, NavParams, ToastController, LoadingController, Loading } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { Profile } from '../../models/profile/profile.interface';
import { DataProvider } from '../../providers/data/data';
import { AuthProvider } from '../../providers/auth/auth';
import { Subscription } from 'rxjs/Subscription';
import { User } from 'firebase/app';

@Component({
  selector: 'profile-view',
  templateUrl: 'profile-view.html'
})
export class ProfileViewComponent {

	public credentials;
	private userForm: FormGroup;
    firstName: AbstractControl;
    lastName: AbstractControl;
    dateOfBirth: AbstractControl;
	private authenticatedUser$: Subscription;
	private authenticatedUser: User;
	public loading:Loading;
	public year = null;
	public currentTime = null;

	profile = {} as Profile;	
 
  	constructor(
		private formBuilder: FormBuilder,
		private authProvider: AuthProvider,
		private data: DataProvider,
		private navCtrl: NavController,
	    private loadingCtrl: LoadingController,
		private navParams: NavParams,
		private toast: ToastController,
		) {

		this.loading = this.loadingCtrl.create();
		this.loading.present();
		this.getCurrentYear();
		this.userForm = this.formBuilder.group({
			firstName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])],
			lastname: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])],			
			dateOfBirth: [null, Validators.compose([Validators.required])],
		});
		this.credentials = this.navParams.get("credentials");
		this.loading.dismiss();
	}

	getCurrentYear() {
		this.currentTime = new Date();
		this.year = this.currentTime.getFullYear();
		console.log(this.year);
	}

	ionViewDidLoad() {}

	async saveProfile() {
		try {
			this.loading = this.loadingCtrl.create();
			this.loading.present();
			this.profile = this.userForm.value;
			await this.authProvider.createUserWithEmailAndPassword(this.credentials);
			await this.authProvider.getAuthenticatedUser().subscribe((user: User) => {
				this.authenticatedUser = user;
			}); 

			if (this.authenticatedUser) {
				await this.data.saveProfile(this.authenticatedUser, this.profile);	
			}
			this.navCtrl.setRoot('TabsPage');
			this.loading.dismiss();
			this.displayMsg("Olá " + this.profile.firstName + " :)");
		}
		catch(e) {
			this.displayMsg(e);
		}
		
	}

	// SHOW TOAST MSG
	displayMsg(msg: string){
		this.toast.create({
			message: msg,
			duration: 2500
		}).present();
	}
}

And I’m getting this error:

ProfileViewComponent.html:16 ERROR TypeError: Cannot read property ‘valid’ of undefined

I guess that the error is at ‘!userForm.valid’:

<button ion-button middle round  class="button-custom" style="width: 100%" type="submit" [disabled]="!userForm.valid">Próximo</button>

But I don’t know why!

Posts: 1

Participants: 1

Read full topic