Form with Custom Component does not recognize control

隐身守侯 提交于 2020-07-30 04:06:28

问题


I am using a custom component (custom-text) which has the below code

    @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>

When I include this control inside a form (template-driven) on another component.

    <form #someForm="ngForm">
        <div custom-text></div>
    </form>

or 

<form #someForm="ngForm">
    <custom-text></custom-text>
</form>

I am unable to get the instance of the control using someForm.controls['controlId']

What am i doing wrong.


回答1:


I leave in stackblitz the most simple custom form control based in material input.

As you see implements ControlValueAccessor, that's has the functions:

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
  }

And a provider like

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

If you want to make a validation inside the component, you need add a new provider

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

And create the function validate

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

I used this two more functions:

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

  }
  focusOut()
  {
    this.onTouched()
  }

To call a change and a touched functions

Updated 01.04.20 well, the problem of this custom material input is that the error can not see reflected in the input, so we are going to make some change

The idea is add a customError matcher

export class CustomFieldErrorMatcher implements ErrorStateMatcher {
  constructor(private customControl: AbstractControl,private errors:any) { }

  isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean {
    return this.customControl && this.customControl.touched && this.customControl.invalid;
  }
}

That's our inner input is invalid if the control is invalid. Well, are a dificult that is know what is the this "control". For this, in ngAfterViewInit we inject the NgControl, and this ngControl will be our control, puff

ngAfterViewInit(): void {
    const ngControl: NgControl = this.injector.get(NgControl, null);
    if (ngControl) {
      setTimeout(() => {
        this.control = ngControl.control;
         this.matcher = new CustomFieldErrorMatcher(this.control,null);
      })
    }
  }

At least add this matcher

  <input name="input" matInput [ngModel]="value"
    (ngModelChange)="setValue($event)" 
    [errorStateMatcher]="matcher" >

You can see in this stackblitz




回答2:


thinking about your problem really you needn't make a custom form component, just a component that pass as input the form control. Just add an Input

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

You use the component like

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


来源:https://stackoverflow.com/questions/55862011/form-with-custom-component-does-not-recognize-control

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!