Угловые элементы как естественная форма контроля в реактивной форме - PullRequest
Новая
       7

Угловые элементы как естественная форма контроля в реактивной форме

0 голосов
/ 18 декабря 2018

Я пытаюсь экспортировать элемент управления формы в качестве углового элемента (веб-компонента) и заставить его работать как собственный элемент ввода, чтобы его можно было использовать с угловыми реактивными формами или аналогичными библиотеками, которые работают с собственными HTML-входами.

Нижеследующий код работает, когда он экспортируется как угловой компонент в модуль.У меня возникают проблемы, когда я экспортирую это как веб-компонент и пытаюсь использовать его в реактивной форме.

этот код написан с использованием платформы Angular 7.1.

шаблон компонента 

<input ngDefaultControl value="value" />

код компонента: 

@Component({
  selector: 'cns-text-input',
  templateUrl: './text-input.component.html',
  styleUrls: ['./text-input.component.scss'],
  providers: [ {
    provide: NG_VALUE_ACCESSOR,
    useExisting:  forwardRef(() => TextInputComponent),
    multi: true
  }]
})
export class TextInputComponent implements ControlValueAccessor,     AfterViewInit {

  @ViewChild(DefaultValueAccessor) valueAccessor:     DefaultValueAccessor;

  public ngAfterViewInit() {
    console.log('value accessor', this.valueAccessor);
    console.log(this);
  }

  public writeValue(obj: any): void {
    this.valueAccessor.writeValue(obj);
  }
  public registerOnChange(fn: any): void {
    this.valueAccessor.registerOnChange(fn);
  }
  public registerOnTouched(fn: any): void {
    this.valueAccessor.registerOnTouched(fn);
  }
  public setDisabledState?(isDisabled: boolean): void {
    this.valueAccessor.setDisabledState(isDisabled);
  }

}

код модуля: 

@NgModule({
  declarations: [TextInputComponent],
  imports: [FormsModule],
  // exports: [TextInputComponent],
  entryComponents: [TextInputComponent]
})
export class FormModule {
  constructor(private injector: Injector) {
    const textInputElement = createCustomElement(TextInputComponent, { 
      injector 
    });
    customElements.define('cns-text-input', textInputElement);
  }

  ngDoBootstrap() {}
}

пример использования: 

// app component html
<form [formGroup]="group">
  <cns-text-input formControlName="text"></cns-text-input>
</form>

// app component

export class AppComponent {
  title = 'web-components-lib-poc';

  public group: FormGroup;

  constructor(private fb: FormBuilder) {
    this.group = this.fb.group({ text: 'my vlaue' });
    this.group.valueChanges.subscribe(val => console.log(val));
  }
}

Приведенный выше код приводит к ошибке: ОШИБКА Ошибка: Нет доступа к значению для элемента управления формы с именем: 'text'

Есть ли лучший способ построить этот компонент так, чтобы он вел себя больше какродной ввод?

1 Ответ

0 голосов
/ 18 декабря 2018

Я нашел ответ.При использовании ненативных компонентов ввода в угловом приложении ngDefaultControl поможет устранить ошибки доступа к значениям.

Таким образом, код будет: 

<cns-text-input formControlName="text" ngDefaultControl></cns-text-input>

** EDIT **

Это также будет работать для других веб-компонентов, таких как бумага для ввода полимерных элементов

...