0

I'm using a directive with a template URL as form in my ionic app, and I'm storing the "response" value inside the directive :

questionForm.ts

import {Component, Input} from "@angular/core";

@Component({
selector: "question-form",
templateUrl: 'questionForm.html'
})
export class QuestionFormComponent {

@Input() public question: any;
@Input() public indexQuestion: number;
public response: any = {};

constructor() {

    this.response.value = "";
    this.response.values = [];
    this.response.remark = "";
}

ngOnInit() {
    this.response.questionId = this.question.id;
}

questionForm.html

<div class="question-form">
<form action="">
    <h1>
        Question {{indexQuestion+1}}
    </h1>
    <hr>
    <div class="question-content">
        <div class="question">
            {{question.question}}
        </div>

        <div>
            <div *ngIf="question.responseType == 'radio'">
                <div *ngFor="let choice of question.choices">

                    <input id="choice{{choice.id}}" class="with-gap" type="radio"
                           [(ngModel)]="response.value" name="choice"
                           value="{{choice.id}}">
                    <label for="choice{{choice.id}}">{{choice.value}}</label>
                </div>
                <div *ngIf="question.choiceOther">
                    <input class="with-gap" id="choiceOther" type="radio" [(ngModel)]="response.value" name="choice"
                           value="other">
                    <label for="choiceOther">Autre</label>
                    <textarea name="choiceOther" *ngIf="response.value=='other'"></textarea>
                </div>
            </div>
            <div *ngIf="question.responseType == 'liste'">
                <div class="select-container">
                    <select name="choice" [(ngModel)]="response.value">
                        <option *ngFor="let choice of question.choices" value="{{choice.id}}">{{choice.value}}
                        </option>
                        <option *ngIf="question.choiceOther" value="other">Autre</option>
                    </select>
                </div>
                <div *ngIf="question.choiceOther">
                    <textarea name="choiceOther" *ngIf="response.value=='other'"></textarea>
                </div>
            </div>
            <div *ngIf="question.responseType == 'coche'">
                <div *ngFor="let choice of question.choices">
                    <input class="filled-in" id="choiceBox{{choice.id}}" type="checkbox"
                           [(ngModel)]="choice.selected" name="choice" value="{{choice.id}}">
                    <label for="choiceBox{{choice.id}}">{{choice.value}}</label>
                </div>
                <div *ngIf="question.choiceOther">
                    <input id="choiceBoxOther" class="filled-in" type="checkbox" [(ngModel)]="response.value"
                           name="choice" value="other">Autre<br>
                    <textarea name="choiceOther" *ngIf="response.value=='other'"></textarea>
                </div>
            </div>

            <div *ngIf="question.responseType == 'jauge'">
                <ion-item>
                    <ion-range [(ngModel)]="response.value" name="value" min="1" max="10" step="1" snaps="true">
                        <ion-label range-left>{{question.leftLabel}}</ion-label>
                        <ion-label range-right>{{question.rightLabel}}</ion-label>
                    </ion-range>
                </ion-item>
            </div>
            <div *ngIf="question.responseType == 'text'">
                <textarea name="text" [(ngModel)]="response.reponseLibre"></textarea>
            </div>

        </div>
        <div *ngIf="question.choiceOther">
            <label>
                Remarques complementaires (facultatif)
            </label>
            <textarea name="remark" [(ngModel)]="response.remark"></textarea>
        </div>
    </div>
</form>

I'm using it in a page, in a *ngFor to handle multiples questions :

response.html

<page-template [hideButtomButton]="true" titlePage="Reponse" classPage="response-page">

<ion-card>
    <ion-card-content>

        <div *ngFor="let question of currentQuestionnaire.questions; let indexQuestion = index">
            <question-form [question]="question" [indexQuestion]="indexQuestion"></question-form>
        </div>
        <!-- I want to get all question-form's "response" value for submitResponses()-->
        <button class="emy-btn emy-btn-pink" (click)="submitResponses()">Submit</button>

    </ion-card-content>
</ion-card>

response.ts

import {Component} from "@angular/core";
import {QuestionnaireService} from "../../providers/web-service/questionnaire-service";
import {NavParams} from "ionic-angular";

@Component({
templateUrl: 'response.html',
providers: [QuestionnaireService]
})
export class ResponsePage {

public currentQuestionnaire: any;
public cleared: boolean = false;
public responses: any = [];

constructor(private questionnaireService: QuestionnaireService, public navParams: NavParams) {
    this.currentQuestionnaire = navParams.get("questionnaire");
}

submitResponses() {
    // I'll need the responses here
}

}

Now, what I want is to get the value "response" of all the question-forms inside the *ngFor and use them in submitResponses, but I don't know how to retrieve them.

1 Answer 1

0

You have to use EventsEmitters to pass data from child component to the parent component. In the QuestionFormComponent declare an @Output() variable and get the submit button to inside of that component so that everytime the submit button is clicked the response object would be returned to the submitResponses().

// questionForm.ts
QuestionFormComponent{

 public response: any = {};

 @Output()
 responseEmitter = new EventEmitter<any>();

 onSubmit(){
  this.responseEmitter.emit(this.response);
 }

}

and

    // response.html

 <div *ngFor="let question of currentQuestionnaire.questions; let 
 indexQuestion = index">
<question-form (responseEmitter)='submitResponses($event)' [question]="question" indexQuestion]="indexQuestion"></question-form>
 </div>

then

// response.ts
export class ResponsePage {

submitResponse(event:any){
 let responseObject=event;
}

}
3
  • The problem with this is that I've no onSubmit in my form (look at questionForm.html) as it would put a button for every form in the *ngFor <div>, that's why I have only one button (submitReponses).
    – Addict
    Oct 19, 2017 at 10:05
  • Then you can bind that method to some other event like (blur) event on text fields so that every time user does a change the response object will be returned Oct 19, 2017 at 10:13
  • Yes, I'm updating it ;) ty
    – Addict
    Oct 20, 2017 at 7:51

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.