質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

0回答

548閲覧

Angular 動的にフォームを増やす方法

Akira1206

総合スコア5

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

1クリップ

投稿2020/05/03 10:59

現在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に書けばよろしいでしょうか。
何卒宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問