Trying to consolidate common code that adds server errors to form components is my current challenge. I want this code to be reusable across all my forms within a base form component.
To illustrate my issue, here is a simplified version of the code snippet:
import { Component } from '@angular/core';
import { Validators } from '@angular/forms';
import { FormGroup, FormBuilder } from '@angular/forms';
export abstract class BaseFormComponent {
form: FormGroup;
fb = new FormBuilder;
submitted = false;
busy: boolean;
onSubmit() {
this.submitted = true;
this.busy = true;
}
}
@Component({
selector: 'my-form',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group">
<label>Name</label>
<input formControlName="name" class="form-control">
</div>
<button type="submit" [disabled]="busy" class="btn btn-primary">Submit</button>
</form>
`
})
export class FormComponent extends BaseFormComponent {
constructor() {
super();
this.createForm();
}
protected createForm() {
this.form = this.fb.group({
name: ['', Validators.compose([Validators.required, Validators.maxLength(10)])],
});
}
}
The main problem I am facing now is encountering errors indicating that the template cannot find properties from the base class.
Error: [21, 24]: The property "form" you are trying to access does not exist in the class declaration. [21, 42]: The method "onSubmit" you are trying to access does not exist in the class declaration. [26, 41]: The property "busy" you are trying to access does not exist in the class declaration.
Upon comparing my code to this article, it appears quite similar, although I have not marked the base form class as a component. However, even when doing so, there seems to be no effect.
The tools and libraries I am using include: