Angular Unit Test: Error: No value accessor for form control

Question

我从我的表单中提取每个字段如下（这在开发中有效但在我的单元测试中无效）

// required.control.ts
import { FormControl, Validators } from '@angular/forms';
    
    export class RequiredControl extends FormControl {
      protected textErrors: { [key: string]: string } = {
        required: 'Mandatory field'
      };
    
      constructor(value: string | any = '') {
        super(value);
    
        this.setValidators([Validators.required]);
      }
    
      get textError() {
        let message = '';
        for (const error in this.textErrors) {
          if (error && this.hasError(error) && this.dirty) {
            message = this.textErrors[error];
    
            return message;
          }
        }
    
        return message;
      }
    
      get state() {
        return this.valid || !this.dirty ? '' : 'error';
      }
    }

这样我就可以清理我的表单并将每个字段的验证逻辑带到一个单独的文件中。现在，在主要组件中我导入了这个文件：

// my-component.component.ts
import { RequiredControl } from './required.control.ts';

@Component({})
export class MyComponent implements OnInit { // I skiped import for this OnInit

   reasonControl = new RequiredControl(null);

   constructor() {}

   ngOnInit() {
     this.requestForm = this.formBuilder.group({
      reason: this.reasonControl, // first method tried :(
      reason:this.reasonControl as FormControl, // second method tried :(
     });
   }
}

在我的单元测试中，我有以下内容：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [ReactiveFormsModule, FormsModule, RouterTestingModule] 
    })
}));

我的模板中有这个：

当我运行这个测试时，我得到以下错误：

Answer 1

我找到了解决问题的正确方法，请在输入元素中使用 ngDefaultControl，如下所示：

此属性为测试提供了必要的知识，以便能够将此元素识别为第三方组件中的 FormControl（如我的情况）。添加该属性可以解决问题。

Angular Unit Test: Error: No value accessor for form control

Angular Unit Test: Error: No value accessor for form control

unit-testing

typescript

form-control

angular

controlvalueaccessor