0

I want to know, how to hide below shown Bootstrap modal form, after submitting the value to the service. I have tried with commented code, but didn't help me. Is there any alternatives.? settings.component.ts

import { Component, OnInit} from '@angular/core';
import { CategoryVM } from '../view-models/category';
import { AppDataService } from '../services/app-data.service';
import { NgForm } from '@angular/forms';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Location } from '@angular/common';
//declare var $: any;

@Component({
    selector: 'app-settings',
    templateUrl: './settings.component.html',
    styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {
    categories: CategoryVM[] = [];
    form: FormGroup;
    errorMessage: string;
          //visible: boolean;
          //private visibleAnimate = false;

          // public visible = true;

    constructor(private dataService: AppDataService, private location: Location) {
        dataService.getCountries().subscribe((data) => this.categories = data);
    }

    ngOnInit() {
        this.dataService.vm = { ParentId: 0, Name: "" };
                // this.visible = true;
    }
    onBack() {
        this.errorMessage = null;
        this.location.back();
    }

    onCancel() {
        this.onBack();
    }
    onSubmit(form: NgForm) {
        this.dataService.createCategory(form.value)
            .subscribe(data => {
                alert("Value Added Successfully");
                      //$("#myModal").hide();
                      //$("#myModal").modal("hide");

                      // this.visible = false;
                this.categories.push(data);

                   //document.getElementById("openModalButton").click(); 
            });
    }    
}

Please focus in OnSubmit() event of form in above and Below is the template

settings.component.html

    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>
<!--<button id="openModalButton" [hidden]="true" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>-->

              <div id="myModal" class="modal fade" role="dialog">
            <!--<div id="myModal" class="modal fade" role="dialog" *ngIf="visible">-->
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                    </div>

                    <div class="modal-body">

                        <form class="cat-form" #categoryForm="ngForm" (ngSubmit)="onSubmit(categoryForm)">
                        <!--<form class="cat-form" #categoryForm="ngForm"   (ngSubmit)="onSubmit(categoryForm);visible=false;">-->

                            <label>Name</label>
                            <div class="form-group">
                                <input class="form-control" name="Name" placeholder="Name" #Name="ngModel" [(ngModel)]="dataService.vm.Name">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-8">
                                    <button type="submit" class="btn btn-lg btn-block btn-primary">Create</button>
                                </div>
                                <div class="form-group col-md-4">
                                    <button type="button" class="btn btn-lg btn-block" (click)="onCancel()" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </div>

If I use commented line of code Modal-form will hide, but opacity remains as shown in this image enter image description here

Shailesh Bhat
  • 152
  • 4
  • 21

1 Answers1

0

Your commented code is a jQuery code, so I assume you don't use an Angular Framework (like ng-bootstrap for example).

You should have a look and integrate one of the abstraction of Bootstrap. Use jQuery in your component means you manipulate directly the dom and this is really not the good way to do.

https://ng-bootstrap.github.io/ https://github.com/valor-software/ngx-bootstrap

Damien Vitrac
  • 116
  • 5