[Angular] Directiveでリアクティブフォームの値を操作する
3603 ワード
Directiveの中でリアクティブフォームを操作したい場面があると思います。
そんな時はNgControl
をDIすればアクセスできます。
例
<form [formGroup]="formGroup">
<input
type="text"
formControlName="hoge"
hoge
/>
<form>
directive.ts
import { OnInit, Directive, ElementRef, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[hoge]'
})
export class HogeDirective implements OnInit {
constructor(
private ngControl: NgControl,
) {}
get control() {
return this.ngControl.control;
}
@HostListener('event', ['$event'])
onHoge(event: any) {
// リアクティブフォームへのアクセスが可能
this.control.value;
this.control.setValue('fuga');
{
}
Author And Source
この問題について([Angular] Directiveでリアクティブフォームの値を操作する), 我々は、より多くの情報をここで見つけました https://qiita.com/kozzzz/items/5934a18a82ad9141012c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .