注入されるデータモデルにネイティブではないFormControlデータに余分なキーと値を追加するにはどうすればよいですか？

Question

私は角度2の別の難点に遭遇しました。回答が選択されたことに基づいて何かを行うようにAngularに指示できる機能をフォームに追加するには、反応的なフォームを生成する方法を学習するよう指摘しました。今私は実際にそれを働かせて、それを反応的な性質を利用する次の部分に移しました。nameのラジオボタンの値を設定する方法は、formControlNameでは機能しません私はラジオボタンで表示したいそれぞれのオプションのために同じname="nameOfThing"を入れて、私はちょうど親でそれを呼び出し、nameの値を直接バインドしました。ここにコードがありますので、私が何を話しているのか知っています。彼らは正常に動作し、私はそれはそうと時間をかけて必要以上のデータベースが大きくなり始めるだろうと感じたの名前が順番に各ラジオボタンに同じであることが必要であることを見て

データ

{ 
question: 'How do you feel about your current image?', 
id  : 'img-q1', 
name : 'img-ques1', //I define the name here 
answers : [ 
    { 
     id  : 'exp0101q', 
     answer : 'Its fine as is.' 
     name : 'theName' //rather than here for each answer. 
    }, 
    { 
     id  : 'exp0102q', 
     answer : 'I want to make minor adjustments.' 
    }, 
    { 
     id  : 'exp0103q', 
     answer : 'I want to change my image.' 
    }, 
    { 
     id  : 'exp0104q', 
     answer : 'Ive never wanted to use a particular image until now.' 
    } 
    ] 
} 

より多くの質問に対する多くの異なる答え。これはローカルですconst私はチュートリアルと一緒に従うために定義しましたが、それ以外は私のFireBaseデータベースと同じです。

私は私の*ngForでそれを呼ばれる方法が完全にレンダリングされたこの

<input type="radio" name="question.name" <!-- remember it's not in "answers" --> 
        [attr.id] = "answer.id" 
        [value]= "answer.answer" 
/> 

、すべてのようでした。

私はこれを反応型に変換しましたが、私はこれをテンプレートに入れました。

<div formGroupName="answers"><!-- doesn't have a "name" property --> 
    <div *ngFor="let ans of quesForm.value.answers"> 
     <input type="radio" formControlName="quesForm.value.name" 
     <!-- trying same philosophy of going up a tier doesn't work --> 
      [attr.id]="ans.id" 
      [attr.value]="ans.answer" 
      /> 
     <label>{{ans.answer}}</label> 
    </div> 
</div> 

name:がanswersに存在しないので、私はそれがその名前を持つコントロールを見つけることができない私に言って、エラーを取得しています当然のようにします。もし私がformControlName="..."を通常のオールname="..."に交換すると、それはうまくいくが、なぜそれが反応する形で使うために私が行ったすべてのことを行ったのかという目的を破る。

私は現在、「」reactiveness「を利用するために周りに思っています全体的なロジックは、」すべてのラジオボタンを選択する

• 使用name属性です。

• idを使用して、それを検出するために必要なスクリプトを選択します。

• idからifまでのステートメントでは、ユーザーが選択した内容に基づいて別の*ngIfコンポーネントがトリガーされます。私は、サイト内の他の場所でそれを使用することがあります

、いくつかの事例「答え」は、この一つとして、他のインスタンスを、保存され、彼らが得るために、ユーザーの側で、多かれ少なかれ機能のためです彼らは正しい情報と例の前にあります。ですから、各質問に一意の名前を付けて、3つのページを同じページにレンダリングし、何らかの形で混乱させないようにしたいと考えています。

これまでのところ、私のコンポーネントのクラスはこのように見えます。

export class QuestionComponent implements OnInit { 

    question: QuestionModel; 
    quesForm: FormGroup; 

    constructor(private qservice : QuestionService, private fbuild : FormBuilder) {} 



    ngOnInit(){ 
     this.qservice.getQuestions().subscribe(Question => { 
      this.question = Question; 
      this.createForm(); 
     }); 

     //console.log(this.question); 
     console.log(this.quesForm); 
    } 

    createForm() { 
     this.quesForm = this.fbuild.group({ 
      question: this.question.question, 
      id  : this.question.id, 
      name : this.question.name, 
      answers : this.fbuild.array([]) 
     }); 
     this.setAnswers(this.question.answers); 
    } 

    get answers(): FormArray { 
     return this.quesForm.get('answers') as FormArray; 
    }; 

    setAnswers(answers : Answers[]){ 
     const answersFGs = answers.map(answers => this.fbuild.group(answers)); 
     const answersFormArray= this.fbuild.array(answersFGs); 
     this.quesForm.setControl('answers', answersFormArray) 
    } 


} 

私は合理化できる唯一のことは、多分私はどこかsetAnswers()関数の内部で何かを思い付くする必要があると思います。たぶん

const name = this.quesform.name; 

何とか.map()にnameを注入のようなもの？それとも別のやり方でやるべきでしょうか？

Answer 1

多分これはあなたが望むものですか？

const answersFGs = answers.map(
    answers => this.fbuild.group(
     Object.assign({name: this.quesform.name }, answers)));