Question

我正在使用具有以下代码的自定义组件（自定义文本）

x <- mtcars
y <- mtcars

y[ 3, 5] <- 300
y[ 2, 5] <- 4


y[ 3, 6] <- 2.8
y[ 2, 6] <- 4



test <-function( Z , TOL ){ as.numeric( 
    x[ , Z] > ( y[ , Z] * (1+TOL)) | 
    x[ , Z] < ( y[ , Z] * (1-TOL)) 
    )
    }


#compare the whole dataset at 20%
do.call( cbind, lapply( names( x )  , test , .2 ) )

# compare a specific column at 20 and 40 % difference
x$morethan20 <-  test( "drat" , .2 )
x$morethan40 <-  test( "wt" , .4 )

当我将此控件包含在另一个组件的表单（模板驱动）中时。

    @Component({
      selector: 'custom-text, [custom-text]',
      templateUrl: './custom-text.template.html',
      styleUrls: ['./custom-text.component.scss']
    })
    export class CustomTextComponent implements OnInit {


      constructor() { }

      ngOnInit() {
      }
    }

Inside the custom-text.template.html

    <mat-form-field>
      <input matInput 
            id="controlid" 
            name="controlname" 
            maxlength="8"
            [(ngModel)]="value">
    </mat-form-field>

我无法使用someForm.controls ['controlId']

获取控件的实例

我在做什么错了。

Answer 1

我在stackblitz中保留了最简单的基于物料输入的自定义表单控件。

如您所见，它实现了ControlValueAccessor，具有以下功能：

onChange:any; //declare this function to indicate in any time that you change the value
onTouched:any; //declare this function to indicate in any time that your compoment is touched

 writeValue(value: any[]|any): void {
    this.value=value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled=isDisabled
  }

和类似的提供商

   {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomMat),
      multi: true
    }

如果要在组件内部进行验证，则需要添加新的提供程序

   {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CustomMat),
      multi: true,
    }

并创建验证功能

validate(control: AbstractControl): ValidationErrors | null{
      //your logic here
      return null;
  }

我使用了另外两个功能：

setValue(value: any){
    this.value=value;
    this.onChange(value);

  }
  focusOut()
  {
    this.onTouched()
  }

调用更改和触摸功能

Answer 2

考虑到您的问题，实际上您不需要制作自定义表单组件，而只需制作一个作为输入表单控件的组件。只需添加输入

@Input() control
//And in .html
<mat-form-field>
      <input matInput 
            id="controlid" 
            name="controlname" 
            maxlength="8"
            [formControl]="control">
</mat-form-field>

您使用类似

的组件

<form #someForm="ngForm">
    <div custom-text [control]="someForm.controls['controlId']"></div>
</form>

具有自定义组件的窗体无法识别控件

2 个答案: