RESTAPIに送信するjsonを構築するために使用されるAngular6リアクティブフォームを作成しようとしています。構造は次のようなものです。
audioTrack:
path: /foo.mp4
track: 1
actions:
normalize: {}
addNoise:
level: 5
subtitleTracks:
- path: /foo.en.srt
format: SubRip
actions:
convert:
format: WebVTT
- path: /foo.es.vtt
format: WebVTT
actions:
spellCheck: {}
したがって、単一のオーディオトラックと字幕トラックのリストがあります。これらのトラックはいずれもオプションです。各トラックを、単一のフォームの一部であるFormGroupを持つコンポーネントとしてカプセル化したいと思います。トラックはボタンで追加または削除されます。
私はこれを行う例を見つけることができませんでした。フォームグループ全体ではなく、個々のコントロールの追加と削除に焦点を当てたものを見つけました。
これは典型的なユースケースだと思いますが、何が欠けていますか？
静的フォームを作成すると、すべてが機能しますが、親コンポーネントにコンポーネントを追加および削除するという単純な行為はすぐに混乱し、続行する方法がわかりません。
フォーム配列を使用する必要があります。これにより、（これに精通していない場合は）配列スタックからプッシュまたはポップできるフォームグループの配列を格納できます。この例はここで見ることができます。何が起こっているのか説明します。
なお、フォーム配列にフォームのグループを反復処理するためにngForを使用する必要があります。これにより、ブラウザに追加またはブラウザから削除された動的に作成されたフォームグループを視覚的に確認できます。
これは次のようになります。
<div *ngFor="let track of audioTracks.controls; let i=index" [formGroupName]="i"> Your custom html here... <div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加