Angular 2.3 Component Inheritance

Question

I am trying to put some common code, which adds server errors to the form etc, and would be used in all my form components, in a base form component.

I have simplified the example code to demonstrate my problem.

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)]) ],
    });
  }
}

For some reason I am getting errors that the template cannot find the base class properties.

Error: [21, 24]: The property "form" that you're trying to access does not exist in the class declaration. [21, 42]: The method "onSubmit" that you're trying to access does not exist in the class declaration. [26, 41]: The property "busy" that you're trying to access does not exist in the class declaration. [21, 24]: The property "form" that you're trying to access does not exist in the class declaration. [21, 42]: The method "onSubmit" that you're trying to access does not exist in the class declaration. [26, 41]: The property "busy" that you're trying to access does not exist in the class declaration.

Comparing my code to this article, it seems pretty much identical except I am not decorating the base form class as a component. Decorating the base class does not seem to make any difference anyway.

I am using:

The inheritance should be done just like that. This is Codelyzer error. Not TS or any other stuff you marked as relevant. And it should be treated accordingly. — Estus Flask
– Estus Flask, Commented Jun 3, 2017 at 17:49

Ceebs · Accepted Answer · 2017-06-04 06:58:32Z

2

To answer my own question. As @estus mentioned, there is nothing wrong with the code and the issue is related to Codelyzer. The issue can be found here.

https://github.com/mgechev/codelyzer/issues/191

A temporary fix to the issue is to simply ignore it by placing the following comment at the top of the file, until issues between tslint and codelyzer has been sorted out.

// tslint:disable:no-access-missing-member

answered Jun 4, 2017 at 6:58

Ceebs

1332 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Twahanz Over a year ago

I manage to resolve my issue by adding my files to the version control i.e.Subversion.

Collectives™ on Stack Overflow

Angular 2.3 Component Inheritance

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related