错误 TS2739:“AbstractControl"类型缺少“FormControl"类型中的以下属性:registerOnChange、registerOnDisabledChange [英] error TS2739: Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange

问题描述

我是 Angular 的新手，正在学习使用 Angular 10 的在线课程，但有一次卡住了.我正在尝试实施反应式表单.为此，我添加了一个新组件 text-input.text-input.component.ts 的代码如下:

import { Component, Input, Self } from '@angular/core';从@angular/forms"导入 { ControlValueAccessor, NgControl };@成分({选择器:应用程序文本输入"，templateUrl: './text-input.component.html',styleUrls: ['./text-input.component.css']})//我们需要实现一个控制值访问器导出类 TextInputComponent 实现 ControlValueAccessor {@Input() 标签:字符串；@Input() type = 'text';构造函数(@Self()公共ngControl:NgControl){this.ngControl.valueAccessor = this;}writeValue(obj: any): void {}registerOnChange(fn: any): void {}registerOnTouched(fn: any): void {}}

这是text-input.component.html

的代码

<input [class.is-invalid]="ngControl.touched &&ngControl.invalid"type="{{type}}";类=表单控制"[formControl]=ngControl.control"placeholder="{{label}}"><div *ngIf='ngControl.control.errors?.required' class="invalid-feedback">请输入{{label}}</div><div *ngIf='ngControl.control.errors?.minlength'class="invalid-feedback">{{label}} 必须至少为 {{ngControl.control.errors.minlength['requiredLength']}}</div><div *ngIf='ngControl.control.errors?.maxlength' class="invalid-feedback">{{label}} 必须最多为 {{ngControl.control.errors.maxlength['requiredLength']}}
<div *ngIf='ngControl.control.errors?.isMatching' class="invalid-feedback">密码不匹配

但是一旦我添加了代码 [formControl] 我开始收到错误:

 类型AbstractControl"缺少来自类型FormControl"的以下属性:registerOnChange、registerOnDisabledChange、_applyFormState4 [formControl]=ngControl.control"placeholder="{{label}}">~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~src/app/_forms/text-input/text-input.component.ts:6:166 templateUrl: './text-input.component.html',~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~组件 TextInputComponent 的模板发生错误.

课程讲师正在尝试使用此组件在注册组件内生成输入控件，代码如下 register.component.html

<h2 class="text-center text-primary">注册</h2><小时><app-text-input [formControl]='registerForm.controls[username"]' [label]='Username"'></app-text-input><div class="form-group text-center"><button class="btn btn-dark mr-2";type="submit">Register</button><button class="btn btn-success mr-2";(点击)=取消()"；type=button">取消

</表单>

还有一瞥register.component.ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';从@angular/forms"导入 { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators };从'ngx-toastr'导入{ToastrService}；从 '../_services/account.service' 导入 { AccountService };@成分({选择器:应用注册"，templateUrl: './register.component.html',styleUrls: ['./register.component.css']})导出类 RegisterComponent 实现 OnInit {@Output() cancelRegister = new EventEmitter();模型:任何 = {};注册表格:表格组；构造函数(私有 accountService:AccountService，私有 toastr:ToastrService，私有 fb:FormBuilder){}ngOnInit(): 无效 {this.initializeForm();}初始化表单(){this.registerForm = this.fb.group({用户名:['', Validators.required]})}寄存器 = () =>{console.log(this.registerForm.value);}}

请让我知道您还需要什么，我是 Angular 的新手，我无法找到路线原因，但如果您能帮助我，那么我将继续我的课程，真的很感激.

解决方案

您是否在此处以严格模式使用 Angular 11?如果是这样，请更改您的 tsconfig.json 文件并设置:

strictTemplates":假

并忽略某些语言功能不可用"的错误.

I am a newbie in Angular and following an online course using Angular 10 but stuck at one point. I am trying to implement the Reactive forms. For that, I have added a new component text-input. The code for the text-input.component.ts is as follows:

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']
})
// We need to implement a control value accessor
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 {
  }
}

Here is the code for the text-input.component.html

<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">
        Password do not match</div>
</div>

But as soon as I add the code [formControl] I start getting the error:

 Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState

4     [formControl]="ngControl.control" placeholder="{{label}}">
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/_forms/text-input/text-input.component.ts:6:16
    6   templateUrl: './text-input.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TextInputComponent.

The course Instructor is trying to generate the input controls inside a register component using this component, the code looks like this in register.component.html

<form [formGroup]="registerForm" (ngSubmit)="register()" autocomplete="off">
    <h2 class="text-center text-primary">Sign up</h2>
    <hr>
    <app-text-input [formControl]='registerForm.controls["username"]' [label]='"Username"'></app-text-input>



    <div class="form-group text-center">
        <button class="btn btn-dark mr-2" type="submit">Register</button>
        <button class="btn btn-success mr-2" (click)="cancel()" type="button">Cancel</button>
    </div>
</form>

And there is a glimpse of register.component.ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { AccountService } from '../_services/account.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  @Output() cancelRegister = new EventEmitter();
  model: any = {};
  registerForm: FormGroup;
  constructor(private accountService: AccountService, private toastr: ToastrService, private fb: FormBuilder) { }

  ngOnInit(): void {
    this.intitializeForm();
  }
  intitializeForm() {
    this.registerForm = this.fb.group({
      username: ['', Validators.required]
      
    })
  } 
  register = () => {
    console.log(this.registerForm.value);
   
  }  
}

Please do let me know what else you need, being new to Angular I am not able to find the route cause, but if you help me out then I shall move further with my course and would really thankful.

解决方案

Are you using Angular 11 in strict mode here? If so change your tsconfig.json file and set:

"strictTemplates": false

and ignore the error for "Some language features are not available".

这篇关于错误 TS2739:“AbstractControl"类型缺少“FormControl"类型中的以下属性:registerOnChange、registerOnDisabledChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！