web-dev-qa-db-fra.com

Angular 4 obtient la valeur de formulaire de modal

J'ai des problèmes pour obtenir la valeur de formulaire du modal lorsque je soumets le formulaire. Le journal indique que addMountForm n'est pas défini. J'ai fourni des extraits de code de mon code HTML ainsi que du composant. J'apprécierais votre aide. 

<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);
}

}
angularng-bootstrap
10
rvd

  1. Utilisez [(ngModel)]="value" au lieu de ngModel seul.

  2. Remplacez (ngSubmit)="onSubmit()" par (ngSubmit)="onSubmit(addMountForm)"

    et dans le composant 

    onSubmit(form: NgForm){
  console.log(form.value);
}
6
digit

Votre code était correct. Comme d'autres l'ont déjà dit, vous devez passer votre formulaire via la méthode onSubmit car il se trouve dans un modèle et c'est pourquoi vous ne pouvez pas y accéder via @ViewChild. 

onSubmit(form){
console.log("adding form values ");
console.log(form.value.archiveOrigin);
}

Plunker

De plus, vous n'avez pas besoin d'utiliser la banane box [()] pour ngModel si vous ne voulez pas utiliser la liaison.

Je vous recommande de comparer ceci la comparaison entre la conception basée sur un modèle et celle basée sur un modèle.

2
M.Farahmand

1) Importer NgForm

import {NgForm} from '@angular/forms';

2) Changez la définition de votre formulaire en ceci

<form (ngSubmit)="onSubmit(addMountForm)" #addMountForm="ngForm" >

3) Changez votre composant en ceci

 import { Component, OnInit } from '@angular/core';
 import {NgForm} from '@angular/forms';
 @Component({
  selector: 'mount-point',
  templateUrl: './mountpoint.component.html',
  styleUrls: ['./mountpoint.component.scss']
})
export class MountPointComponent implements OnInit {

  constructor(
    private modalService: NgbModal
  ){}

 ngOnInit(){

  }

  open(content) {
      this.modalService.open(content).result.then((result) => {
         console.log("closed");
      }, (reason) => {
         console.log("dismissed" );
      });
   }

  onSubmit(addMountForm: NgForm){
    console.log("adding form values ");
    console.log(addMountForm.value);
}

}

Cela fonctionnerait et vous obtiendrez un objet sur la console contenant toutes les valeurs du formulaire.

0
collinx