Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how should fix the error: Type 'AbstractControl' is missing the following properties from type 'FormControl' #11

Open
new2690 opened this issue Jul 22, 2021 · 1 comment

Comments

@new2690
Copy link

new2690 commented Jul 22, 2021

i use angular 12.1.1. hi in section 12 (reactive forms) after creating the text-input component we and declare all inputs in the ts file and implement ControlValueAccessor interface I get error in text-input HTML file when I trying to type [formControl]="ngControl.control". error message is that:
Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState

text-input.component.html code:

<div class="form-group">
    <input [class.is-invalid]="ngControl.touched && ngControl.invalid" type={{type}} class="form-control"
      [formControl]="ngControl.control"  placeholder={{label}}>
    <div *ngIf="ngControl.control.errors?.required" class="invalid-feedback">Please enter a {{label}}</div>
    <div *ngIf="ngControl.control.errors?.minlength" class="invalid-feedback">
        {{label}} must be at least {{ngControl.control.errors.minlength['requiredLength']}}
    </div>
    <div *ngIf="ngControl.control.errors?.maxlength" class="invalid-feedback">
        {{label}} must be at most {{ngControl.control.errors.maxlength['requiredLength']}}
    </div>
    <div *ngIf="ngControl.control.errors?.isMatching" class="invalid-feedback">
        Passwords do not match
    </div>
</div>

text-input.component.ts code:

import { Component, Input, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
@Component({
  selector: 'app-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.css']
})
export class TextInputComponent implements ControlValueAccessor {
  @Input() label: string;
  @Input() type = 'text';

  constructor(@Self() public ngControl: NgControl) {
    this.ngControl.valueAccessor = this;
  }
  writeValue(obj: any): void {
  }
  registerOnChange(fn: any): void {    
  }
  registerOnTouched(fn: any): void {    
  }
  setDisabledState?(isDisabled: boolean): void {    
  }
}

please help me how i should fix this thank you

@new2690 new2690 changed the title error: Type 'AbstractControl' is missing the following properties from type 'FormControl' how should fix the error: Type 'AbstractControl' is missing the following properties from type 'FormControl' Jul 22, 2021
@yzharyi
Copy link

yzharyi commented Aug 25, 2021

hi, @new2690! Try to use angular 10.1.0 version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants