I work on an angular application. In a component, I have the following code
export class GlobalComponent {
@Input()
form!: FormGroup<DeepRequired<GlobalBean>>
with the following template extract
..................
<mode-impression-ticket [form]="form" [labelCheckBox]="text" ></mode-impression-ticket>
...................
Here is the following mode-impression-ticket component
@Component({
selector: "mode-impression-ticket",
.............
export class LocalComponent implements OnInit {
@Input()
form!: FormGroup<DeepRequired<GlobalBean>>
localForm: FormGroup<DeepRequired<GlobalBean>> | undefined;
@Input()
labelCheckBox!: string
ngOnInit() {
this.localForm = Object.assign({}, this.form);
console.log(this.localForm);
console.log(this.localForm.controls['flag']?.value);
console.log(this.labelCheckBox);
The objective of the preceeding component is to get the values of fields with the same form and afterwards forward it to its parent
The console.log above don't give any error and print value
With the following template extract
@Component({
selector: "mode-impression-ticket",
template: `
<form [formGroup]="localForm">
<mat-checkbox formControlName="flag">{{labelCheckBox}}</mat-checkbox>
.........................................
And there is an error at line <mat-checkbox formControlName.........
TypeError: this.form._updateTreeValidity is not a function
UPDATE
this.form is initialized in two component above (grand parent component in a method which is the following underneath). The child, parent and grand parent component have the same form
ngOnInit() {
this.form = VtForm.build(this._route,
FormHelpers.getInitData(this._route),
)
}
question from:
https://stackoverflow.com/questions/65943222/mat-checkbox-that-display-the-error-typeerror-this-form-updatetreevalidity-is 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…