Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
TypeError: this.form._updateTreeValidity is not a function
See original GitHub issuehello there
i got this issue in my use case:
enrollment.component.html
<form #registerForm="ngForm" [formGroup]="registerForm" (ngSubmit)="saveRegistration(registerForm.value)" novalidate>
<!-- HORIZONTAL STEPPER EXAMPLE -->
<!-- <mat-horizontal-stepper class="mat-elevation-z4" [linear]="true"> -->
<mat-horizontal-stepper [linear]="true">
<mat-step [stepControl]="horizontalStepperStep1">
<form [formGroup]="horizontalStepperStep1">
<ng-template matStepLabel>Fill out your name</ng-template>
<div fxLayoutGap="40px">
<mat-form-field fxFlex="50">
<input matInput placeholder="First name" formControlName="firstName" required>
<mat-error *ngIf="horizontalStepperStep1Errors.firstName.required">
First Name is required!
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="50">
<input matInput placeholder="Last name" formControlName="lastName" required>
<mat-error *ngIf="registerFormErrors.lastName.required">
Last Name is required!
</mat-error>
</mat-form-field>
</div>
<div class="pt-24" fxLayout="row" fxLayoutAlign="start end">
<button mat-raised-button matStepperNext type="button" color="accent">
Next
</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="horizontalStepperStep2">
<form [formGroup]="horizontalStepperStep2">
<ng-template matStepLabel>Fill out your address</ng-template>
<div>
<mat-form-field fxFlex="100">
<textarea matInput placeholder="Address" formControlName="address" required>
1600 Amphitheatre Pkwy
</textarea>
<mat-error *ngIf="horizontalStepperStep2Errors.address.required">
Address is required!
</mat-error>
</mat-form-field>
</div>
<div class="pt-24" fxLayout="row" fxLayoutAlign="start end">
<button class="mr-8" mat-raised-button matStepperPrevious type="button" color="accent">
Previous
</button>
<button mat-raised-button matStepperNext type="button" color="accent">
Next
</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="horizontalStepperStep3">
<form [formGroup]="horizontalStepperStep3">
<ng-template matStepLabel>Fill out your address</ng-template>
<div>
<mat-form-field fxFlex="33">
<input matInput placeholder="City" formControlName="city" required>
<mat-error *ngIf="horizontalStepperStep3Errors.city.required">
City is required!
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="34">
<input matInput placeholder="State" formControlName="state" required>
<mat-error *ngIf="horizontalStepperStep3Errors.state.required">
State is required!
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="33">
<input matInput #postalCode placeholder="Postal Code" formControlName="postalCode"
required>
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
<mat-error *ngIf="horizontalStepperStep3Errors.postalCode.maxlength">
Postal Code needs to be max.
{{horizontalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters
</mat-error>
<mat-error *ngIf="horizontalStepperStep3Errors.postalCode.required">
Postal Code is required!
</mat-error>
</mat-form-field>
</div>
<div class="pt-24" fxLayout="row" fxLayoutAlign="start end">
<button class="mr-8" mat-raised-button matStepperPrevious type="button" color="accent">
Previous
</button>
<button mat-raised-button matStepperNext type="button" color="accent">
Next
</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<div class="h2 m-16" fxLayout="row" fxLayoutAlign="center center">
Thank your for filling out our form.
</div>
<div class="pt-24" fxLayout="row" fxLayoutAlign="end end">
<button class="mr-8" mat-raised-button matStepperPrevious type="button" color="accent">
Previous
</button>
<!-- <button mat-raised-button type="submit" color="accent" (click)="finishHorizontalStepper(registerForm.value); registerForm.value=''">
Finish
</button> -->
<button type="submit" mat-raised-button color="accent" [disabled]="!registerForm.form.valid" value="submit">
Finish
</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<!-- / HORIZONTAL STEPPER EXAMPLE -->
</form>
and here is the component file
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AbstractControl, FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { FuseConfigService } from '../../../core/services/config.service';
import { Register2Service } from './register-2.service';
import { fuseAnimations } from '../../../core/animations';
import { Register2 } from './register-2.model';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { environment } from '../../../../environments/environment';
@Component({
selector : 'fuse-register-2',
templateUrl: './register-2.component.html',
styleUrls : ['./register-2.component.scss'],
providers: [Register2Service],
animations : fuseAnimations
})
export class FuseRegister2Component implements OnInit
{
registerForm: FormGroup;
registerFormErrors: any;
// Horizontal Stepper
horizontalStepperStep1: FormGroup;
horizontalStepperStep2: FormGroup;
horizontalStepperStep3: FormGroup;
horizontalStepperStep1Errors: any;
horizontalStepperStep2Errors: any;
horizontalStepperStep3Errors: any;
constructor(
private http: HttpClient,
private fuseConfig: FuseConfigService,
private registerservice: Register2Service,
private formBuilder: FormBuilder,
private route: Router,
)
{
this.fuseConfig.setSettings({
layout: {
navigation: 'none',
toolbar : 'none',
footer : 'none'
}
});
this.registerFormErrors = {
firstName : {},
lastName : {},
address : {},
city : {},
state : {},
postalCode: {},
};
// Horizontal Stepper form error
this.horizontalStepperStep1Errors = {
firstName: {},
lastName : {}
};
this.horizontalStepperStep2Errors = {
address: {}
};
this.horizontalStepperStep3Errors = {
city : {},
state : {},
postalCode: {}
};
}
ngOnInit()
{
this.registerForm = this.formBuilder.group({
firstName : ['', Validators.required],
lastName : ['', Validators.required],
address : ['', Validators.required],
address2 : ['', Validators.required],
city : ['', Validators.required],
state : ['', Validators.required],
postalCode: ['', [Validators.required, Validators.maxLength(5)]],
});
this.registerForm.valueChanges.subscribe(() => {
this.onRegisterFormValuesChanged();
});
// Horizontal Stepper form steps
this.horizontalStepperStep1 = this.formBuilder.group({
firstName: ['', Validators.required],
lastName : ['', Validators.required]
});
this.horizontalStepperStep2 = this.formBuilder.group({
address: ['', Validators.required]
});
this.horizontalStepperStep3 = this.formBuilder.group({
city : ['', Validators.required],
state : ['', Validators.required],
postalCode: ['', [Validators.required, Validators.maxLength(5)]]
});
this.horizontalStepperStep1.valueChanges.subscribe(() => {
this.onRegisterFormValuesChanged();
});
this.horizontalStepperStep2.valueChanges.subscribe(() => {
this.onRegisterFormValuesChanged();
});
this.horizontalStepperStep3.valueChanges.subscribe(() => {
this.onRegisterFormValuesChanged();
});
}
onRegisterFormValuesChanged()
{
for ( const field in this.registerFormErrors )
{
if ( !this.registerFormErrors.hasOwnProperty(field) )
{
continue;
}
// Clear previous errors
this.registerFormErrors[field] = {};
// Get the control
const control = this.registerForm.get(field);
if ( control && control.dirty && !control.valid )
{
this.registerFormErrors[field] = control.errors;
}
}
}
saveRegistration(regForm: NgForm): void {
console.log(regForm);
}
finishHorizontalStepper()
{
alert('You have finished the horizontal stepper!');
}
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:6 (1 by maintainers)
Top Results From Across the Web
TypeError: this.form._updateTreeValidity is not a function
This can happen when you're using the input name formControl or formGroup on a custom component which isn't a form control.
Read more >FormBuilder error "this.form._updateTreeValidity is not a ...
I'm attempting to follow the Ionic 2 and Forms instructions and get the error: this.form._updateTreeValidity is not a function which my app ...
Read more >TypeError: this.form._updateTreeValidity is not a function
I'm currently using Angular Forms version 2.0.0 and trying to make a contact us modal with a contact form inside. Immediately after the...
Read more >error typeerror: this.form.get is not a function
This is THE right way to enqueue script in wordpress. this form _updatetreevalidity is not a function at formgroupdirective _updatedomvalue forms js 7482....
Read more >How to use angular-swagger-generator FormService? - Reddit
HomeComponent.html:4 ERROR TypeError: this.form._updateTreeValidity is not a function. Which is baffling to me as someone new to Angular.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Even i got the same issue, But my form header includes only [formGroup]=“form”. Anyone has solution for this issue.
@ericmartinezr thx for your advise, in the meantime i figured out this issue by removing template . driven syntax
#registerForm="ngForm". it seems that it’s not allowed to run both ( template driven syntaxes + reactive form syntaxes) in the same header’s form.