Angular2 (Plunker に TS を含むベータ 0) で、それぞれがコンポーネントで表される 2 つのネストされたフォームを持つシナリオを実装しようとしています。
親コンポーネントはWord、偽の辞書の単語を表す です。子コンポーネントはWordSense's で、それぞれが親単語の意味を表します。
どちらのコンポーネントもモデル駆動型フォームを使用し、子フォームは を使用してモデルの値をフォーム コントロールにバインドしますngModel。このようにして、親コンポーネントはその言葉の意味を子コンポーネントに簡単に渡すことができ、双方向バインディングが残りを行います。
シンプルなカスタム バリデータが両方のフォームに添付されています。とりわけ、単語のフォームが無効な場合だけでなく、その意味のいずれかが無効な場合にも、送信ボタンを無効にしたいと考えています。このために、isValid編集中のモデルにプロパティを追加し、センス フォームの変更を観察するコードを追加しました。変更が発生するたびに、フォームのvalidプロパティを確認し、それに応じてモデルのプロパティを設定します。次に、ビューとコードの親コンポーネントのレベルでチェックを簡単に追加できるので、両方のフォームが正常な場合にのみ投稿できます。
カスタム検証と追加のロジックをサポートするために、最初のコードをテンプレート ベースのフォームからモデル ベースのフォームに切り替えました。それでも、リファクタリングされたコードを起動するとすぐに、いくつかのNo Directive annotation foundエラーが発生し、その意味がわかりません。
おそらく私は明らかな何かを見逃していますが、私はここでは初心者です。誰でも提案できますか？このプランカーで再現を見つけることができます: http://plnkr.co/edit/v9Dj5j5opJmonxEeotcR。ここにいくつかの重要なコードがあります:
a) 親コンポーネント:
@Component({
selector: "word",
directives: [FORM_DIRECTIVES, FORM_PROVIDERS, WordSense],
templateUrl: `
<div>
<form [ngFormModel]="wordForm"
(ngSubmit)="onSubmit(wordForm.value)"
role="form">
<div class="form-group"
[class.has-error]="!lemma.valid && lemma.touched">
<label for="lemma">lemma</label>
<input type="text" id="lemma"
maxlength="100" required spellcheck="false"
class="form-control"
placeholder="lemma"
[ngFormControl]="wordForm.controls['lemma']">
<div *ngIf="lemma.hasError('required') && lemma.touched"
class="text-danger small">lemma required</div>
<div *ngIf="lemma.hasError('lemmaValidator') && lemma.touched"
class="text-danger small">invalid lemma</div>
</div>
...
<div class="form-group">
<table class="table table-bordered">
<tbody>
<tr *ngFor="#s of senses">
<td>
<word-sense [sense]="s" [ranks]="ranks" [fields]="fields"></word-sense>
</td>
</tr>
</tbody>
</table>
</div>
...
<button type="submit"
[ngClass]="{disabled: !wordForm.valid}"
class="btn btn-primary btn-sm">save</button>
</form>
</div>
`,
inputs: [
"word"
]
})
export class Word {
private _word: IWordModel;
public set word(value: IWordModel) {
this._word = value;
this.setFormValues();
}
public get word() {
return this._word;
}
// ...
// form
public wordForm: ControlGroup;
public lemma: Control;
public language: Control;
public class: Control;
public ranks: IPair<number>[];
public senses: ISenseViewModel[];
public fields: IFieldModel[];
constructor(private formBuilder:FormBuilder) {
// ...
this.senses = [
this.createSense()
];
// ...
// build the form
this.wordForm = this.formBuilder.group({
"lemma": ["", Validators.compose([Validators.required, LemmaValidator.isValidLemma])],
"language": ["eng", Validators.required],
"class": ["s.", Validators.required],
});
this.lemma = <Control> this.wordForm.controls["lemma"];
this.language = <Control> this.wordForm.controls["language"];
this.class = <Control> this.wordForm.controls["class"];
// ...
}
}
b) 子コンポーネント:
@Component({
selector: "word-sense",
directives: [FORM_DIRECTIVES],
template: `
<form class="form-inline" role="form" [ngFormModel]="senseForm">
<div class="form-group"
[class.has-error]="!definitionCtl.valid">
<input type="text"
class="form-control"
placeholder="definition"
[ngFormControl]="definitionCtl"
[(ngModel)]="sense.definition">
</div>
<div class="form-group"
[class.has-error]="!yearCtl.valid">
<input type="number"
class="form-control"
placeholder="date"
[ngFormControl]="yearCtl"
[(ngModel)]="sense.year">
</div>
...
</form>
`,
inputs: [
"sense",
"ranks",
"fields"
]
})
export class WordSense {
// model being edited
public sense: ISenseViewModel;
// lookup data
public ranks: IPair<number>[];
public fields: IFieldModel[];
public field: IFieldModel;
// form
public senseForm: ControlGroup;
public definitionCtl: Control;
public yearCtl: Control;
public rankCtl: Control;
public fieldsCtl: Control;
constructor(private formBuilder: FormBuilder) {
this.senseForm = this.formBuilder.group({
"definition": ["", Validators.required],
"year": [0, Validators.compose([Validators.required, YearValidator.isValidYear])],
"rank": [{value: 2, label: "media"}, Validators.required],
"fields": [""]
});
this.definitionCtl = <Control> this.senseForm.controls["definition"];
this.yearCtl = <Control> this.senseForm.controls["year"];
this.rankCtl = <Control> this.senseForm.controls["rank"];
this.fieldsCtl = <Control> this.senseForm.controls["fields"];
}
// ...
}