Угловой 8 - formControlName внутри компонента Kendo TextArea - PullRequest
Новая
       24

Угловой 8 - formControlName внутри компонента Kendo TextArea

0 голосов
/ 05 ноября 2019

Я пытаюсь использовать formControlName внутри текстовой области Kendo, и внешний компонент применяет его.

Используя следующую базовую ссылку кода, она все еще не работает. Angular 2 - formControlName внутри компонента

Как кто-то может это исправить?

InputText.ts 

export class InputTextComponent implements  AfterViewInit, ControlValueAccessor  {
  @Input() disabled: boolean;
  @Output() saveValue = new EventEmitter();

  value: string;
  onChange: () => void;
  onTouched: () => void;

  writeValue(value: any) {
    this.value = value ? value : "";
  }

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

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

  setDisabledState(isDisabled) {this.disabled = isDisabled}
}

InputText.html 

 <input kendoTextBox />

1 Ответ

0 голосов
/ 06 ноября 2019

Не уверен, что это то, что вы спрашиваете, но для того, чтобы использовать formControlName внутри пользовательского компонента, вот что вы делаете

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { InputTextComponent } from './input-text';

@NgModule({
  declarations: [
    AppComponent,
    InputTextComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component. html 

<form [formGroup]="details">
  <input-text formControlName="name"></input-text>
  <!-- This should show the name as you change it in your custom control -->
  {{details.value | json}} 
</form>

app.component.ts 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public details: FormGroup;

  constructor(
  ) {
    this.details = new FormGroup({
      name: new FormControl("name")
    });
  }
}

input-text.component.html 

<input kendoTextBox [(ngModel)]="value" (ngModelChange)="onChange($event)" />

input-text.component.ts 

import { Component, forwardRef } from "@angular/core";
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";

@Component({
  selector: "input-text",
  templateUrl: "./input-text.html",
  styleUrls: ["./input-text.scss"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputTextComponent),
      multi: true
    }
  ]
})
export class InputTextComponent implements ControlValueAccessor {
    public value: string;

    propagateChange = (value: string) => {};

    writeValue(obj: any): void {
        this.value = obj;
    }

    registerOnTouched(fn: any): void {}

    registerOnChange(fn) {
      this.propagateChange = fn;
    }

    onChange(newValue){
        this.propagateChange(newValue);
    }
}
...