Angular 4 get form value from modal
angular, ng-bootstrap
Solution
Use `[(ngModel)]="value"` instead of `ngModel` alone.
Change `(ngSubmit)="onSubmit()"` to `(ngSubmit)="onSubmit(addMountForm)"`
and in the component
onSubmit(form: NgForm){
console.log(form.value);
}
Problem
I am having issues to get the form value from the modal when I submit the form. The log says the addMountForm is undefined. I have provided code snippets of my html as well as component. I would appreciate your help. ``` <ng-template #content let-c="close" let-d="dismiss"> <div class="modal-header"> <h3 class="modal-title">Add Mount Point</h3> </div> <div class="modal-body"> <form (ngSubmit)="onSubmit()" #addMountForm="ngForm" > <div class="form-group"> <label class="col-sm-2 control-label text-nowrap" for="archiveOrigin">Archive Origin</label> <div class="col-sm-10"> <input type="text" class="form-control" ngModel id="archiveOrigin" name="archiveOrigin" placeholder="Archive Origin"/> </div> </div> <button type="submit" class="btn btn-default">Add</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" (click)="c('Close click')"> Close </button> </div> </ng-template> <div class="page pt-2"> </div> @Component({ selector: 'mount-point', templateUrl: './mountpoint.component.html', styleUrls: ['./mountpoint.component.scss'] }) export class MountPointComponent implements OnInit { @ViewChild('addMountForm') addMountForm : NgForm; constructor( private modalService: NgbModal ){} open(content) { this.modalService.open(content).result.then((result) => { console.log("closed"); }, (reason) => { console.log("dismissed" ); }); } onSubmit(){ console.log("adding form values "); console.log(this.addMountForm); } } ```