Question

我是 angular 的新手，我正在学习响应式形式。

有一个我无法解决的问题。在这里，我正在尝试为我的表单创建一个可重用的输入组件。但是，我无法解决这个 Abstractform control error。

注意：我不想使用 "strictTemplates": false。

有人能帮我了解这里到底发生了什么，我该如何解决这个错误？

这是重现错误的文件列表 -

reactive-form.component.ts

import { Component } from '@angular/core'
import { FormGroup, FormControl, Validators } from '@angular/forms'

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css'],
})
export class ReactiveFormComponent {
  cardForm = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
  })
}

reactive-form.component.html（此处出错）

<form [formGroup]="cardForm"></form>

<!--Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, registerOnDisabledChange, _applyFormState  -->
<app-input [control]="cardForm.controls.name"></app-input>

input.component.ts

import { Component, Input } from '@angular/core'
import { FormControl } from '@angular/forms'

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css'],
})
export class InputComponent {
  @Input() control: FormControl = new FormControl()
}

input.component.html

<input [formControl]="control" />
<ng-container *ngIf="control.dirty && control.touched && control.errors">
  <div *ngIf="control.errors.required">Value is required</div>
  <div *ngIf="control.errors.minlength">
    Value should be longer Required min value is
    {{ control.errors.minlength.requiredLength }}
  </div>
</ng-container>

注意：我已经分析了几个类似的线程，但这些对我来说很难理解。如果有人能举出这个例子并解释这里有什么问题，我们将不胜感激。

Answer 1

您收到此错误是因为 Angular 不知道您正在传递 FormControl。相反，Angular 将其视为 AbstractControl。

<块引用>

“AbstractControl”类型缺少“FormControl”类型的以下属性：registerOnChange、registerOnDisabledChange、_applyFormState

解决方案

添加 cardFormNameControl getter 以指定您将 FormControl 传递给 InputComponent。

<块引用>

reactive.component.html

export class ReactiveFormComponent {
  ...

  get cardFormNameControl(): FormControl {
    return this.cardForm.get('name') as FormControl;
  }
}

<app-input [control]="cardFormNameControl"></app-input>

Sample solution on StackBlitz

Answer 2

你可以得到另一种在你的组件中使用吸气剂的方法

control:FormControl=new FormControl();
@Input('control') set _(value)
{
  this.control=value as FormControl;
}

Answer 3

你的输入组件必须是这样的： .ts 文件：

@Component({
  selector: 'app-input', 
  templateUrl: './input.component.css.html', 
  styleUrls: ['./input.component.css.css'], 
  encapsulation: ViewEncapsulation.None,  
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] })
export class InputComponent implements ControlValueAccessor,OnChanges{   
InputValue: any;  
@Input() control: FormControl = new FormControl();   
onChange(value) {
    this.propagateChange(value);  
 }   
writeValue(value: any) {
    this.InputValue = value;  
 } 
  registerOnChange(fn: any) 
{
    this.propagateChange = fn;  
 }   
registerOnTouched(fn: any) {
    this.propagateTouched = fn;   
}  
 propagateChange = (_: any) => { }  
 propagateTouched = (_: any) => { } 
}

html 文件：

<input [(ngModel)]='InputValue' (ngModelChange)="onChange($event)" />
<ng-container *ngIf="control.dirty && control.touched && control.errors">
  <div *ngIf="control.errors.required">Value is required</div>
  <div *ngIf="control.errors.minlength">
    Value should be longer Required min value is
    {{ control.errors.minlength.requiredLength }}
  </div>
</ng-container>

get name() {
    return this.cardForm.get('name');
}
<app-input [control]="name" formControlName="name">
</app-input>

“AbstractControl”缺少来自“FormControl”

3 个答案:

解决方案