反応型の角型PrimeNGドロップダウンコンポーネント - 初期値

Question

primeNgドロップダウンコンポーネントを使用して、初期値でドロップダウンを初期化しようとしていますが、私は反応的なアプローチを使用しています。

私はprimeNgのドキュメントとデモをチェックしました。ほとんどすべてのテンプレート駆動型の例がありますが、私はモデル駆動型と同じようにしたいと思います。

リスト内の値でドロップダウンリストを表示できますが、選択した項目はフォームで宣言した項目ではなく、リストの最初の項目です。

私のコード： テンプレート

<div [formGroup]="formGroup"> 
     <p-dropdown [options]="results" 
       formControlName="second" 
       (onChange)="onChangeHandler($event)" 
       optionLabel="label"> 
     </p-dropdown> 
    </div> 

コンポーネント

this.second = new FormControl('second'); 
    this.formGroup= this.builder.group({ 
      second: this.second 
     }); 


    this.results = []; 
    this.results.push({ label: 'First Data', value: "first" }); 
    this.results.push({ label: 'Second Test Data', value: "second" }); 
    this.results.push({ label: 'Third Data', value: "third" }); 

お知らせください。

モデル駆動型のprimeNGドロップダウンコンポーネントの実例を誰かが共有することができれば、それは素晴らしいものになります。 値には、私の例のようなキー、値属性が必要です。

Answer 1

secondという名前のFormControlは、FormGroupの一部であるため、インスタンス化はFormGroupの内部にある必要があります。次の例を考えてみましょう。

this.formGroup= this.builder.group({ 
    second: new FormControl('second') 
});