0

Hi All I am currently developing an app that requires to display questions one by one and then post the answers from the input field in the post request. so do so I have created a form where I have taken questions in div and showing and hiding one after another on click of next button but when I click on create project button the answer for the last question is only fetched and send in the post.

here is my html 

<form #projectForm="ngForm" novalidate (ngSubmit)="onCreateProject(projectForm)">
        <div class="form-group row mt-3 justify-content-center" *ngIf="isShow1">
            <label for="projectname" class="col-sm-3 col-md-2 col-form-label">Project name</label>
            <div class="col-sm-6 col-md-5">
                <input type="text" #projectname="ngModel" [class.is-invalid]="projectname.invalid && projectname.touched"
                    class="form-control" name="projectname" placeholder="Enter projectname"
                    [(ngModel)]="project.projectname" required>
                <span class="text-danger" [class.d-none]="projectname.valid || projectname.untouched">projectname is required</span>
            </div>
            <label class="btn btn-primary" (click)="onNext1(pr)">Next</label>
        </div>

        <div class="form-group row mt-3 justify-content-center" *ngIf="isShow2">
            <label for="projectdescription" class="col-sm-3 col-md-2 col-form-label">project description</label>
            <div class="col-sm-6 col-md-5">
                <input type="text" #projectdescription="ngModel" [class.is-invalid]="projectdescription.invalid && projectdescription.touched"
                class="form-control" name="projectdescription" placeholder="Enter projectdescription"
                [(ngModel)]="project.projectdescription" required>
                <span class="text-danger" [class.d-none]="projectdescription.valid || projectdescription.untouched">projectdescription is required</span>
            </div>
            <!-- <button class="btn btn-primary" (click)="onNext2()" type="submit" [disabled]="projectForm.form.invalid" >Next</button> -->
        </div>
<div class="form-group row mt-5 justify-content-center">
                <button type="submit" [disabled]="projectForm.form.invalid" class="btn btn-primary mt-3 col-md-2 col-sm-4"
                >
                    Create project
                </button>
            </div>
    </form>


onNext1(pr){
    //console.log(pr.value);
    return this.isShow1 = false, this.isShow2 = true;

  }
  onNext2(){
    return this.isShow2 = false, this.isShow3 = true;
  }
  onNext3(){
    return this.isShow3 = false, this.isShow4 = true;
  }
  onNext4(){
    return this.isShow4 = false, this.isShow5 = true;
  }
  onNext5(){
    return this.isShow5 = false, this.isShow6 = true;
  }
  onNext6(){
    return this.isShow6 = false, this.isShow7 = true;
  }
onCreateProject(projectForm : NgForm){

    this.projectService.createProject(projectForm.value);
    console.log(projectForm.value);
  }


createProject(project : Pro){
    return this.http.post('http://localhost:3700/api/project/addproject', project)
    .subscribe(res => {
      this.router.navigate(['/dashboard']);
    });
  }
K.M.J
  • 105
  • 1
  • 2
  • 13
  • How are you creating your formGroup and can we see that code? What does the createProject function do? And you've only included section 1 and 2 here, can you add a couple more? It is hard to solve a problem with incomplete information. – Steve Dec 05 '19 at 19:11
  • @Steve updated the code – K.M.J Dec 05 '19 at 19:14
  • @K.M.J Please use https://stackblitz.com/ – Dmitry Grinko Dec 05 '19 at 19:23
  • Your code is really repetitive. Suggestion: Create an array which defined all the diffs between them (Title, field to save to etc.). Then create a carousel structural directive, which uses this array as input. – MoxxiManagarm Dec 05 '19 at 19:48
  • try using ngShow. with ngIf you are removing the elements so when you go to post it actually doesn't exist. You want to just hide and use hidden inputs so when you post they still exist, just hidden. I would post an answer but it would basically be this https://stackoverflow.com/a/19177773/11605410 – TheMikeInNYC Dec 05 '19 at 22:01

0 Answers0