角反応性フォーム内のドロップダウン入力の動的数を処理する -- javascript フィールド と angular フィールド と angular-reactive-forms フィールド 関連 問題

Handling dynamic number of drop-down inputs in Angular reactive form












0
vote

問題

日本語

無効形態の新機能、そして現在これを働くためにどのように取得するかを理解することができません。私はダイナミックな数のサイコロを持つサイコロローラーを作っていますが、入力数は異なる形に依存します。私は適切な入力を表示することができますが、私の人生がフォームから複数の入力値にアクセスする方法を見つけることができません。

最初の問題は、フォームグループにさまざまな数のプロパティを作成する方法がわかりません。今私は3を持っていますが、フォーム入力の数を決定するのと同じ形で決定された番号を持ちたいです。

サイコロの数を設定する送信関数でMultiDierOllsformを入力するためのFor-Loopを追加しました。

<事前> <コード> dieNumberSubmit() { this.num=Number(this.dieNumberForm.value['numberDie']); this.multiSelected = true; for (let i = 1; i <= this.num; i ++) { this.multiDieRollsForm[`${i}`] = ['']; } console.log(this.multiDieRollsForm); }

MultiDierOllsformを送信するときにエラーが発生します(名前のコントロールが '1'のコントロールが見つかりません)。

秒で、multidierOllsformsのonlidControlのみがバインドされていますが、multidierollsform.valueは入力の数に関係なく1つの値を返します。

私は基本的なものを誤解していると確信しているので、助けが大いに感謝されるでしょう。

これは私が持っているものです(multidierollsformの入力数を決定するフォームを省略しています。 HTML:

<事前> <コード> <form class="form-group" name='multiDieRolls' [formGroup]="multiDieRollsForm" (ngSubmit)="rollDie()"> <span *ngFor="let i of Arr(num).fill(1)"> <select class = "left-element" formControlName='{{i}}'> <option value = '' disabled>Select die type</option> <option value='4'>4</option> <option value='6'>6</option> <option value='8'>8</option> <option value='10'>10</option> <option value='12'>12</option> <option value='20'>20</option> </select> </span> <button type="submit">Roll Dice</button> </form>

Component.TS:

<事前> <コード> export class MultiDiceRollerComponent implements OnInit { //number of die inputs for multiDieRollsForm Arr = Array; num: number = 0; model: any = {}; constructor(public fb:FormBuilder) { } multiDieRollsForm = this.fb.group({ 1: [''], 2: [''], 3: [''] }) rollDie() { console.log(this.multiDieRollsForm.value) } }
英語

New to reactive forms, and currently unable to figure out how to get this to work. I am making a dice roller with a dynamic number of dice, thus the number of inputs depends on a different form. I am getting the right number of inputs to display, but can't for the life of me figure out how to access multiple input values from the form.

First issue is I'm not sure how to create a varying number properties in the form group. Right now I have 3, but I would like to have the number determined by the same form that determines the number of form inputs.

I've tried adding a for-loop that populates multiDieRollsForm in the submit function that sets the number of dice.

dieNumberSubmit() {     this.num=Number(this.dieNumberForm.value['numberDie']);     this.multiSelected = true;     for (let i = 1; i <= this.num; i ++) {       this.multiDieRollsForm[`${i}`] = [''];     }     console.log(this.multiDieRollsForm);   } 

This results in an error (Cannot find control with name: '1') when submitting multiDieRollsForm.

Second, only one formControl in multiDieRollsForm is binding, multiDieRollsForm.value returns one value regardless of how many inputs are selected.

I'm sure I'm misunderstanding something basic, so any help would be greatly appreciated.

Here's what I have (omitting the form that determines the number of inputs in multiDieRollsForm, that's working fine) The html:

<form class="form-group" name='multiDieRolls' [formGroup]="multiDieRollsForm" (ngSubmit)="rollDie()">                          <span *ngFor="let i of Arr(num).fill(1)">                 <select class = "left-element" formControlName='{{i}}'>                     <option value = '' disabled>Select die type</option>                     <option value='4'>4</option>                     <option value='6'>6</option>                     <option value='8'>8</option>                     <option value='10'>10</option>                     <option value='12'>12</option>                     <option value='20'>20</option>                 </select>             </span>                          <button type="submit">Roll Dice</button>          </form> 

component.ts:

export class MultiDiceRollerComponent implements OnInit {    //number of die inputs for multiDieRollsForm   Arr = Array;   num: number = 0;     model: any = {};    constructor(public fb:FormBuilder) { }     multiDieRollsForm = this.fb.group({     1: [''],     2: [''],     3: ['']    })     rollDie() {            console.log(this.multiDieRollsForm.value)             }  } 
</div
        

回答リスト


関連する質問

3  [上記のオプションのどれも角度のいずれも]をクリックするときに、残りのチェックボックスアイテムをリセットする方法はありますか?  ( Is there a way to reset the rest of the checkbox item when clicking none of the ) 
チェックボックスで無効形態に苦しんでいます。 項目のどれも選択されていない場合は、送信ボタンを無効にする必要があります。これは にされています 上記のいずれにも呼ばれていないオプションがあります。これを選択するには、チェックボックス の選択されたすべての...

0  Angular 6:フォームを搭載したカレンダー/デートピッカーをどのようにしていますか?  ( Angular 6 how to intergarte calender date picker with form ) 
2つのDIVがあり、ユーザーが欲しい日付を選択できる日付ピッカー/カレンダーが含まれています、2秒には電子メール、Citym、Hotel、のフォームが含まれています。 だからユーザーは日付を選択してフォームを記入して、書籍をクリックして送信してください。 こ...

1  Reactive Forms値をモデルオブジェクトに変換します  ( Convert reactive forms value into model object ) 
<コード> Reactive Forms を使用しています。 formGroup の値をモデルクラスオブジェクトに変換します。その解決策を教えてください。また、 confirmPasword ではなく、 password fieldsのみを送信したいです。...

3  反応性形態の角度Pregengドロップダウン成分 - 初期値  ( Angular primeng dropdown component in reactive forms initial value ) 
Pregeng DropDownコンポーネントを使用して、私は成功しない最初の値でドロップダウンを初期化しようとしています、私は反応的アプローチを使用しています。 Pregengのドキュメントとデモをチェックしました - ほとんどすべての例テンプレートを使...

0  Angular Reactive Forms FormArray - 2番目のFormGroup要素を割り当てることができません  ( Angular reactive forms formarray cannot assign second formgroup element ) 
私は反応性フォームと入れ子になったフォーマレーションと戦っています。 私は、複数のアドレスを持つクライアントを表示するためにアプリを開発するプロセスにあります。 FormArrayは複数のアドレスを保持し、* NGを使用してユーザーに表示したいと思われます。 ...

133  Angular2で入力を無効にする方法  ( How to disable a input in angular2 ) 
IN TS <コード> is_edit = true を無効にする... <事前> <コード> <input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngMod...

0  動的に構築された反応形式の最初の値を取得します  ( Get first values of an dynamically built reactive form ) 
私はサービスコールの値を持つ動的フォームを構築するフォームコンポーネントを持っています。それは正しく機能します。 今度は、これらの値を別のコンポーネントに表示したいです。 イベントエミッタとフォーム。でこの問題を解決しようとしました。 <事前> <コード> n...

5  FormArrayの長さはform.reset()によってリセットされません  ( Formarray length does not reset by form reset ) 
角形式のデータ駆動型アプローチで作業しています。フォームコントロールをフォームアレイに追加しました。フォーム.Reset()を使用して追加コントロールをリセットしますが、Form.Reset()DoESTはFormArrayの長さをリセットしません。これは既知...

0  Reactive FormsのAngular Pregeng Multisect - 編集操作中にバックエンドから選択されたデータをマッピングする  ( Angular primeng multiselect in reactive forms mapping selected data from back ) 
私は私の角度プロジェクトのためにPregeng Libraryを使っています。私が何かを編集するとき、私の選択したデータをバックエンドからマッピングする問題があります。選択したデータはエラーなしで表示されません。以下は私のコードです。助けてください。 ダイアロ...

1  Nested FormGroup、Angular6内のFormArrayへのアクセス  ( Accessing formarray inside nested formgroup angular6 ) 
私は単純な反応性形態を持っています <事前> <コード> ngOnInit() { this.outerForm = this._formBuilder.group({ firstFormGroup: this._formBuilder...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有