現在Angularアプリを開発しております。
【やりたいこと】
動的にフォームの入力項目が増える(イメージとしてはボタンをクリックすることで入力項目が増える)フォームを作成しようとしています。
【現状】
色々なサイトをみてFormGroup/FormArrayで項目を追加する方法があるのはわかりましたが、リアクティブフォームではなく、テンプレート駆動で開発したいと考えております。
同様のケースを探してみたのですが見つからず、相談させていただきました。
ソースは以下のようなものとなっており、
追加ボタンを押すと、言語と言語レベルがもう1セット入力できるイメージです。
Angular
1<mat-dialog-content> 2 <mat-form-field fxFill appearance="outline"> 3 <mat-label>言語</mat-label> 4 <mat-select #language matInput required ngModel name="language"> 5 <mat-option [value]="['英語', subjectTypes.ENGLISH]">英語</mat-option> 6 <mat-option [value]="['中国語', subjectTypes.CHINESE]">中国語</mat-option> 7 <mat-option [value]="['韓国語', subjectTypes.KOREAN]">韓国語</mat-option> 8 <mat-option [value]="['スペイン語', subjectTypes.SPANISH]">スペイン語</mat-option> 9 <mat-option [value]="['イタリア語', subjectTypes.ITALIAN]">イタリア語</mat-option> 10 <mat-option [value]="['フランス語', subjectTypes.FRENCHsadZ]">フランス語</mat-option> 11 </mat-select> 12 </mat-form-field> 13 <mat-form-field fxFill appearance="outline"> 14 <mat-label>レベル</mat-label> 15 <mat-select #languageLevel matInput required ngModel name="languageLevel"> 16 <mat-option [value]="['日常レベル', subjectTypes.CONVERSATIONAL]">日常レベル</mat-option> 17 <mat-option [value]="['ビジネスレベル', subjectTypes.BUSINESS]">ビジネスレベル</mat-option> 18 <mat-option [value]="['ネイティブレベル', subjectTypes.NATIVE]">ネイティブレベル</mat-option> 19 </mat-select> 20 </mat-form-field> 21 </mat-dialog-content> 22 <mat-dialog-actions> 23 <button mat-raised-button fxFill [color]="'accent'" (click)="addLanguage()"> 24 追加する 25 </button>
どのように、
component.html,component.tsに書けばよろしいでしょうか。
何卒宜しくお願い致します。
あなたの回答
tips
プレビュー