Angular 6 で Reactive Forms を使ってカスタム入力コンポーネントを作成する方法
Angular 6 で ngModel を使ってカスタム入力コンポーネントを作成する方法
コンポーネントを作成する
まず、新しいコンポーネントを作成する必要があります。ターミナルで以下のコマンドを実行します。
ng generate component custom-input
このコマンドは、custom-input という名前のコンポーネントと、それに関連するファイル ( custom-input.component.ts と custom-input.component.html ) を作成します。
custom-input.component.ts ファイルを開き、以下のコードを追加します。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
@Input() label: string;
@Input() value: string;
writeValue(value: string) {
this.value = value;
}
registerOnChange(fn: Function) {
this.onChange = fn;
}
registerOnTouched(fn: Function) {
this.onTouched = fn;
}
onChange(value: string) {
}
onTouched() {
}
}
このコードは、label と value という 2 つのプロパティを持つコンポーネントを定義します。 label プロパティは、入力コンポーネントのラベルのテキストを設定するために使用されます。 value プロパティは、入力コンポーネントの値を設定および取得するために使用されます。
writeValue、registerOnChange、registerOnTouched メソッドは、ngModel ディレクティブとの統合に必要なものです。これらのメソッドは、コンポーネントの値を ngModel ディレクティブと同期するために使用されます。
<label for="customInput">{{ label }}</label>
<input type="text" id="customInput" [(ngModel)]="value">
このコードは、ラベルとテキスト入力フィールドを持つ HTML テンプレートを定義します。 [(ngModel)] ディレクティブは、入力フィールドの値を value プロパティにバインドするために使用されます。
app.module.ts ファイルを開き、CustomInputComponent を declarations 配列に追加します。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CustomInputComponent } from './custom-input/custom-input.component';
@NgModule({
declarations: [
AppComponent,
CustomInputComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
他のコンポーネントで CustomInputComponent を使用するには、以下のコードを追加します。
<app-custom-input label="名前" [(ngModel)]="name"></app-custom-input>
このコードは、名前 というラベルを持つ CustomInputComponent インスタンスを作成します。 [(ngModel)] ディレクティブは、コンポーネントの value プロパティを name プロパティにバインドするために使用されます。
これで、Angular 6 で ngModel を使ってカスタム入力コンポーネントを作成する方法がわかりました。
その他のヒント
- カスタム入力コンポーネントをさらにカスタマイズするには、
@Inputデコレータを使用して他のプロパティを追加できます。 - コンポーネントのロジックをカプセル化するには、コンポーネントクラスにメソッドを追加できます。
- コンポーネントのスタイルをカスタマイズするには、
styleUrlsプロパティを使用して CSS ファイルを追加できます。
custom-input.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
@Input() label: string;
@Input() value: string;
writeValue(value: string) {
this.value = value;
}
registerOnChange(fn: Function) {
this.onChange = fn;
}
registerOnTouched(fn: Function) {
this.onTouched = fn;
}
onChange(value: string) {
}
onTouched() {
}
}
<label for="customInput">{{ label }}</label>
<input type="text" id="customInput" [(ngModel)]="value">
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CustomInputComponent } from './custom-input/custom-input.component';
@NgModule({
declarations: [
AppComponent,
CustomInputComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<app-custom-input label="名前" [(ngModel)]="name"></app-custom-input>
実行方法
このコードを実行するには、以下の手順に従います。
- 新しい Angular プロジェクトを作成します。
custom-input.component.tsとcustom-input.component.htmlファイルをsrc/app/custom-inputディレクトリに作成します。ng serveコマンドを実行してアプリケーションを起動します。
ブラウザで http://localhost:4200 にアクセスすると、名前 というラベルを持つ入力フィールドが表示されます。入力フィールドにテキストを入力すると、コンポーネントの value プロパティに値が反映されます。
Angular 6 で ngModel を使用せずにカスタム入力コンポーネントを作成する方法
Reactive Forms を使用するには、以下の手順に従います。
フォームグループを作成する
まず、フォームグループを作成する必要があります。フォームグループは、フォームコントロールのコレクションです。
import { FormGroup, FormControl } from '@angular/forms';
const formGroup = new FormGroup({
name: new FormControl('')
});
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-custom-input',
templateUrl: './custom-input.component.html',
styleUrls: ['./custom-input.component.css']
})
export class CustomInputComponent {
@Input() formGroup: FormGroup;
@Input() controlName: string;
@Output() valueChange = new EventEmitter<string>();
constructor() { }
ngOnInit() {
this.formGroup.get(this.controlName).valueChanges.subscribe(value => {
this.valueChange.emit(value);
});
}
}
このコードは、formGroup と controlName という 2 つのプロパティを持つコンポーネントを定義します。 formGroup プロパティは、コンポーネントが使用するフォームグループを指定するために使用されます。 controlName プロパティは、コンポーネントが使用するフォームコントロールの名前を指定するために使用されます。
ngOnInit ライフサイクルフックは、フォームコントロールの値の変化を監視し、valueChange イベントを発行するために使用されます。
<input type="text" formControlName="{{ controlName }}">
このコードは、formControlName ディレクティブを使用して、入力フィールドをフォームコントロールにバインドします。
<form [formGroup]="formGroup">
<app-custom-input formGroup="formGroup" controlName="name" (valueChange)="onNameChange($event)"></app-custom-input>
</form>
このコードは、formGroup という名前のフォームグループを作成し、CustomInputComponent インスタンスをフォームに追加します。 (valueChange) イベントバインディングは、onNameChange メソッドを valueChange イベントにバインドします。
onNameChange メソッドを編集する
onNameChange(value: string) {
console.log(value);
}
このコードは、valueChange イベントが発行されたときに呼び出される onNameChange メソッドを定義します。
angular
