如何检索属性值

Question

I'm trying to push value of checkbox inside the database

I'm using two files (html and ts)

This is my survey-result.ts:

export class SurveyResultIdComponent implements OnInit {

id: string = "";
surveyDetail = [];
surveyAnswer: FormGroup;


constructor(private router:Router, public route: ActivatedRoute, private fb: FormBuilder) { 
this.id = this.route.snapshot.paramMap.get('id'); //get id parameter
}

ngOnInit() {
this.getSurveyDetail();
this.surveyAnswer = this.fb.group({
  survey: ['test',Validators.required],
  question: ['survey',Validators.required],
  choices: ['choix1',Validators.required],
})
}

getSurveyDetail() {

const apiUrl = 'http://localhost:3000/api';

  axios({
      method: 'get',
      url: `${apiUrl}/survey/show/`+ this.id,
      data: this.surveyDetail
  }).then((response) => {
    this.surveyDetail = response.data;
  });
}

answer() {
const apiUrl = 'http://localhost:3000/api'
axios({
    method: 'post',
    url: `${apiUrl}/survey/answer`,
    data: this.surveyAnswer.value
})
} 
 onSubmit(form:FormGroup){}
}

And here this is my survey-result.html:

<tr *ngIf="surveyDetail">
        <td>{{ surveyDetail.name }}</td>
          <td>{{ surveyDetail.questionnaires[0].question }}</td>
        <td>
            <p>
              <label>
                <input type="checkbox" formControlName="choices" value='{{ surveyDetail.questionnaires[0].choices[0].text }}'/>
                <span>{{ surveyDetail.questionnaires[0].choices[0].text }}</span>
              </label>
            </p>
          </td> 
          <td>
            <p>
              <label>
                <input type="checkbox"  formControlName="choices" value='{{ surveyDetail.questionnaires[0].choices[0].text1 }}'/>
                <span>{{ surveyDetail.questionnaires[0].choices[0].text1 }}</span>
              </label>
            </p>
          </td>   
      </tr>
    </tbody>
  </table>
  <div class="answer">
    <button class="btn waves-effect waves-light" type="button" name="action" (click)="answer()">Answer
        <i class="material-icons right">add</i>
    </button>

So I have a question ( Do you like juice?)

You have 2 checkbox (Yes And No) The problem is when I choose a checkox and then click on answer. I have 'choix1' and not the value of checkox

I think my problem is maybe due to set a value?

Here you have the structur if this can help you:

Answer 1

So based on the selection your control will have a different value, this feels like radio button job, not a checkbox, I would do it like this.

   <label>
     <input type="radio" [value]="surveyDetail.questionnaires[0].choices[0].text" formControlName="choices">
       <span>{{surveyDetail.questionnaires[0].choices[0].text}}</span>
   </label>
   <label>
     <input type="radio" [value]="surveyDetail.questionnaires[0].choices[0].text1" formControlName="choices">
       <span>{{surveyDetail.questionnaires[0].choices[0].text}}</span>
   </label>