Javascript 如何为Angular中的被动表单构建可重用字段

我正在尝试为被动表单构建一个可重用的字段组件，但无法从

自定义输入
组件中获取值


提交

我的自定义输入可重用组件

从'@angular/core'导入{Component，OnInit，Input}；
从“@angular/forms”导入{FormControl}”；
@组成部分({
选择器：“自定义输入”，
模板：“”，
样式：[]
})
导出类CustomInputComponent实现OnInit{
@Input（）公共id:string；
@Input（）公共类：string；
@Input（）公共名称：string；
@Input（）public formControlName:字符串；
构造函数（）{}
恩戈尼尼特（）{
}
}
您可以实现
ControlValueAccessor
，但可能不想重新实现本机输入的方法。为此，可以使用
FormControlDirective
访问valueAccessor

formControl
和
formControlName
被添加为输入属性，因此在这两种情况下都可以使用。如果提供了
formControlName
，则将从
ControlContainer
检索
FormControl
的实例

@Component({
      selector: 'app-custom-input',
      template: `<input type="text" [formControl]="control">`,
      styleUrls: ['./custom-input.component.scss'],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: CustomInputComponent,
          multi: true
        }
      ]
    })
    export class CustomInputComponent implements ControlValueAccessor {
      @Input() formControl: FormControl;
      @Input() formControlName: string;
    
      @ViewChild(FormControlDirective, {static: true})
      formControlDirective: FormControlDirective;
      private value: string;
      private disabled: boolean;
    
      constructor(private controlContainer: ControlContainer) {
      }
    
      get control() {
        return this.formControl || this.controlContainer.control.get(this.formControlName);
      }
    
    
      registerOnTouched(fn: any): void {
        this.formControlDirective.valueAccessor.registerOnTouched(fn);
      }
    
      registerOnChange(fn: any): void {
        this.formControlDirective.valueAccessor.registerOnChange(fn);
      }
    
      writeValue(obj: any): void {
        this.formControlDirective.valueAccessor.writeValue(obj);
      }
    }

@组件({
选择器：“应用程序自定义输入”，
模板：``，
样式URL:['./自定义输入.component.scss']，
供应商：[
{
提供：NG_值访问器，
useExisting:CustomInputComponent，
多：真的
}
]
})
导出类CustomInputComponent实现ControlValueAccessor{
@Input（）formControl:formControl；
@Input（）formControlName:字符串；
@ViewChild（FormControlDirective，{static:true}）
formControlDirective:formControlDirective；
私有值：字符串；
私有禁用：布尔；
构造函数（专用controlContainer:controlContainer）{
}
获取控制（）{
返回this.formControl | | this.controlContainer.control.get（this.formControlName）；
}
注册人（fn:任何）：无效{
这个.formControlDirective.valueAccessor.registerOnTouched（fn）；
}
注册变更（fn:任何）：无效{
这个.formControlDirective.valueAccessor.registerOnChange（fn）；
}
writeValue（对象：任意）：无效{
this.formControlDirective.valueAccessor.writeValue（obj）；
}
}

来源：
您可能需要阅读ControlValueAccessor..我遵循了您的示例，我有formControlDirective，它仍然没有定义确保您正在导入
ReactiveFormsModule