質問編集履歴
3
angularのバージョン追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
#Angular5のReactiveFormsを使用しています。
|
|
2
2
|
AbstractControl.setValueメソッドを使用して値をセットしているのですが、chengeイベントが発火せずに困っています。
|
|
3
3
|
どなたか上手いこと呼び出す方法をご存知ないでしょうか？
|
|
4
4
|
|
2
不要なインデント削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,26 +9,26 @@
|
|
|
9
9
|
|
|
10
10
|
####sample.component.html
|
|
11
11
|
```html
|
|
12
|
-
|
|
12
|
+
<input type="text" formControlName="hoge" change />
|
|
13
13
|
```
|
|
14
14
|
####sample.component.ts
|
|
15
15
|
```typescript
|
|
16
|
-
|
|
16
|
+
public form: FormGroup;
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
constructor(private _http: Http, @Inject('BASE_URL') private _baseUrl: string, private _fb: FormBuilder, private _router: Router) {
|
|
19
|
-
|
|
19
|
+
this.form = this._fb.group({
|
|
20
|
-
|
|
20
|
+
filePath: new FormControl('')
|
|
21
|
-
|
|
21
|
+
})
|
|
22
|
-
|
|
22
|
+
}
|
|
23
23
|
|
|
24
|
+
get hoge(): AbstractControl {
|
|
25
|
+
return this.form.get("hoge") as AbstractControl;
|
|
26
|
+
}
|
|
24
27
|
|
|
25
|
-
|
|
28
|
+
click() {
|
|
26
|
-
|
|
29
|
+
this.hoge.setValue("hogehoge");
|
|
27
|
-
|
|
30
|
+
}
|
|
28
31
|
|
|
29
|
-
click() {
|
|
30
|
-
this.hoge.setValue("hogehoge");
|
|
31
|
-
}
|
|
32
32
|
```
|
|
33
33
|
####change.Directive.ts
|
|
34
34
|
```typescript
|
1
sample.component.html と change.Directive.ts の関連付けができるように@Directive追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,11 +5,11 @@
|
|
|
5
5
|
【特記事項】
|
|
6
6
|
- 値のセットはAbstractControl.setValueメソッドにこだわってない
|
|
7
7
|
- chengeイベントではなくてもchange.Directive.ts で変更を拾えれば問題ない
|
|
8
|
+
- 以下のコードに記載してないがDirectiveの登録などは行っている（画面からはイベントが拾える状態）
|
|
8
9
|
|
|
9
|
-
|
|
10
10
|
####sample.component.html
|
|
11
11
|
```html
|
|
12
|
-
<input type="text" formControlName="hoge"
|
|
12
|
+
<input type="text" formControlName="hoge" change />
|
|
13
13
|
```
|
|
14
14
|
####sample.component.ts
|
|
15
15
|
```typescript
|
|
@@ -32,9 +32,15 @@
|
|
|
32
32
|
```
|
|
33
33
|
####change.Directive.ts
|
|
34
34
|
```typescript
|
|
35
|
+
@Directive({
|
|
36
|
+
selector: 'input[change]'
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
export class TrimDirective {
|
|
35
40
|
// 呼び出されない
|
|
36
41
|
@HostListener('change')
|
|
37
42
|
onChange() {
|
|
38
43
|
alert("呼び出されない");
|
|
39
44
|
}
|
|
45
|
+
}
|
|
40
46
|
```
|