Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- export class HomeComponent implements OnInit {
- survey: FormGroup;
- user: User[] = [
- {
- id: 1,
- question: 'Question 1',
- choice: [
- {
- ChoceId: 1,
- Value: '1choice 1'
- },
- {
- ChoceId: 2,
- Value: '1choice 2'
- },
- {
- ChoceId: 3,
- Value: '1choice 3'
- },
- {
- ChoceId: 4,
- Value: '1choice 4'
- }
- ]
- }, {
- id: 2,
- question: 'Question 2',
- choice: [
- {
- ChoceId: 1,
- Value: '2choice 1'
- },
- {
- ChoceId: 2,
- Value: '2choice 2'
- },
- {
- ChoceId: 3,
- Value: '2choice 3'
- }
- ]
- }, {
- id: 3,
- question: 'Question 3',
- choice: [
- {
- ChoceId: 1,
- Value: '3choice 1'
- },
- {
- ChoceId: 2,
- Value: '3choice 2'
- },
- {
- ChoceId: 3,
- Value: '3choice 3'
- }
- ]
- }
- , {
- id: 4,
- question: 'Question 4',
- choice: [
- {
- ChoceId: 1,
- Value: '4choice 1'
- },
- {
- ChoceId: 2,
- Value: '4choice 2'
- },
- {
- ChoceId: 3,
- Value: '4choice 3'
- },
- {
- ChoceId: 4,
- Value: '4choice 4'
- }
- ]
- }
- , {
- id: 5,
- question: 'Question 5',
- choice: [
- {
- ChoceId: 1,
- Value: '5choice 1'
- },
- {
- ChoceId: 2,
- Value: '5choice 2'
- },
- {
- ChoceId: 3,
- Value: '5choice 3'
- },
- {
- ChoceId: 4,
- Value: '5choice 4'
- }
- ]
- },
- {
- id: 6,
- question: 'Question 6',
- choice: [
- {
- ChoceId: 1,
- Value: '6choice 1'
- },
- {
- ChoceId: 2,
- Value: '6choice 2'
- },
- {
- ChoceId: 3,
- Value: '6choice 3'
- },
- {
- ChoceId: 4,
- Value: '6choice 4'
- }
- ]
- },
- {
- id: 7,
- question: 'Question 7',
- choice: [
- {
- ChoceId: 1,
- Value: '7choice 1'
- },
- {
- ChoceId: 2,
- Value: '7choice 2'
- },
- {
- ChoceId: 3,
- Value: '7choice 3'
- },
- {
- ChoceId: 4,
- Value: '7choice 4'
- }
- ,
- {
- ChoceId: 5,
- Value: '7choice 4'
- }
- ]
- }
- ]
- constructor() {
- }
- ngOnInit() {
- this.survey = new FormGroup({
- sections: new FormArray([
- this.initSection(),
- ]),
- });
- for (let i = 0; i < this.user.length; i++) {
- this.addQuestion(0, this.user[i].question)
- this.add(0, i+1,this.user[i].choice);
- this.removeOption(0, i, 0)
- }
- this.removeQuestion(0);
- }
- initSection() {
- return new FormGroup({
- questions: new FormArray([
- this.initQuestion('questionTitle')
- ])
- });
- }
- initQuestion(val: string) {
- return new FormGroup({
- questionTitle: new FormControl(val),
- options: new FormArray([
- this.initOptions('')
- ])
- });
- }
- initOptions(val: string) {
- return new FormGroup({
- optionTitle: new FormControl(val)
- });
- }
- addSection() {
- const control = <FormArray>this.survey.get('sections');
- control.push(this.initSection());
- }
- addQuestion(j, val: string) {
- console.log(j);
- const control = <FormArray>this.survey.get('sections').controls[j].get('questions');
- control.push(this.initQuestion(val));
- }
- add(i, j, choice: Choices[]) {
- const control = <FormArray>this.survey.get('sections').controls[i].get('questions').controls[j].get('options');
- if (choice) {
- for (j = i; j < choice.length; j++) {
- control.push(this.initOptions(choice[j] .Value));
- }
- }else{
- control.push(this.initOptions(''));
- }
- }
- getSections(form) {
- //console.log(form.get('sections').controls);
- return form.controls.sections.controls;
- }
- getQuestions(form) {
- //console.log(form.controls.questions.controls);
- return form.controls.questions.controls;
- }
- getOptions(form) {
- //console.log(form.get('options').controls);
- return form.controls.options.controls;
- }
- removeQuestion(j) {
- const control = <FormArray>this.survey.get('sections').controls[j].get('questions');
- control.removeAt(j);
- }
- removeSection(i) {
- const control = <FormArray>this.survey.get('sections');
- control.removeAt(i);
- }
- removeOption(i, j, k) {
- // debugger;
- console.log(i, j, k);
- const control = <FormArray>this.survey.get(['sections', i, 'questions', j, 'options']); // also try this new syntax
- control.removeAt(k);
- }
- remove(i, j) {
- const control = <FormArray>this.survey.get(['sections', i, 'questions', j, 'options']);
- control.removeAt(0);
- control.controls = [];
- }
- onSubmit(form:NgForm) {
- debugger;
- console.log(this.survey.value.optionTitle);
- console.log(form);
- }
- }
- <form [formGroup]="survey" novalidate (ngSubmit)="onSubmit(survey)">
- <!---Survey Section -->
- <div formArrayName="sections">
- <div class="section-container" *ngFor="let section of getSections(survey); let i = index">
- <div class="ui raised segments" [formGroupName]="i">
- <h4 class="ui header">User likes and choices</h4>
- <!-- <input type="text" placeholder="Untitled form" formControlName="sectionTitle">
- <input type="text" placeholder="Form Description" formControlName="sectionDescription"> -->
- <!-- Question segment -->
- <!---Survey Section -->
- <hr>
- <div class="question-container" formArrayName="questions">
- <div [formGroupName]="j" *ngFor="let question of getQuestions(section); let j = index">
- <input type="text" placeholder="Untitled Question" formControlName="questionTitle">
- <!-- <select formControlName="questionType">
- <option></option>
- <option>Check Boxes</option>
- <option>Free Text</option>
- <option>Rating</option>
- <option>Date</option>
- <option>Time</option>
- </select> -->
- <div *ngIf="survey.errors" class="alert alert-danger">
- {{ survey.errors }}
- </div>
- <div>
- <a (click)="add(i,j)">Add_Option</a>||
- <a (click)="remove(i,j)">Remove_whole_options</a>
- </div>
- <!-- Option Addation -->
- <div formArrayName="options">
- <div [formGroupName]="k" *ngFor="let option of getOptions(question); let k=index">
- <input type="radio" id="{{ 'acceptable' + i}}" >
- <input type="text" placeholder="Option 1" formControlName="optionTitle">
- <!-- <a (click)="remove(i,j)">Option</a> -->
- <span *ngIf="getOptions(question).length > 1" (click)="removeOption(i,j,k)">Remove_Option</span>
- </div>
- <!-- End Option Addition -->
- <!-- Option Addtion -->
- <!-- End Option Addition -->
- </div><br>
- <hr>
- <div>
- <a (click)="addQuestion(i)">Add Question...</a>
- <span *ngIf="getQuestions(section).length > 1" (click)="removeQuestion(i)">Remove Question</span>
- </div>
- </div><br>
- </div>
- <!-- End Question -->
- </div>
- <br>
- <button (click)="addSection()" class="point">Add Section </button>
- <span *ngIf="getSections(survey).length > 1" (click)="removeSection(i)">Remove Section</span>
- </div>
- </div>
- <!-- End Section -->
- <button type="submit">Get-Link</button>
- </form>
- <pre> {{survey.value | json}} </pre>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement