Winkel 4 erste form Wert aus modal

Bin ich mit Fragen, um die form Wert von der modalen wenn ich das Formular abschicken. Der log sagt das addMountForm ist nicht definiert. Ich habe die code snippets von meinem html-als auch als Komponente. Ich würde Ihre Hilfe schätzen.

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

}

beim senden des Formulars wird der modal-popup schließt sich oder es bleibt immer noch offen?
Welche version von modal verwenden Sie? Diese ein? github.com/shlomiassaf/angular2-modal

InformationsquelleAutor rvd | 2017-05-05

angular ng-bootstrap

6
1. Verwenden [(ngModel)]="value" statt ngModel allein.
2. Ändern (ngSubmit)="onSubmit()" zu (ngSubmit)="onSubmit(addMountForm)"
  
  sowie in der component
```
onSubmit(form: NgForm){
  console.log(form.value);
}
```
- Ich habe gerade versucht, die aber immer noch sehen 'undefined' für addMountForm .
- Haben Sie schon importieren FormsModule in Ihre wichtigsten Komponenten?
- Ja, ich habe alle erforderlichen Importe.
- Ich aktualisierte mein code, der dem folgenden, und ich bin in der Lage, um die form. Aber mit diesem mir nicht erlauben, die Verwendung der @ViewChild Funktionalität. <form (ngSubmit)="onSubmit(addMountForm)" #addMountForm="ngForm">
- Warum wollen Sie verwenden viewChild. Wollen Sie das untergeordnete Formular aus, um Zugriff durch Eltern?
- Ja das ist der Anwendungsfall.
- es scheint nicht zu funktionieren wie, die. ich bin mit dem gleichen Problem.
- beim senden des Formulars wird der modal-popup schließt sich oder es bleibt immer noch offen? @Inaie
- Sehen Sie, in diese plunker, dass nur der Wechsel von 2 ist nötig (+ onSubmit).
- popup-Menü wird geschlossen nach dem senden. @KaranGarg
InformationsquelleAutor digit
2

Dein code war richtig. Nur wie die anderen sagen, Sie brauchen, um passieren Ihre form durch die onSubmit-Methode, weil es in eine Vorlage und das ist, warum Sie nicht zugreifen können, um es von @ViewChild.
```
onSubmit(form){
console.log("adding form values ");
console.log(form.value.archiveOrigin);
}
```
Plunker

Auch, Sie brauchen nicht zu verwenden, banana-box [()] für ngModel wenn Sie nicht möchten, dass für die Bindung.

Ich empfehlen, Sie sehen diese Vergleich zwischen template-driven und model-driven design.

InformationsquelleAutor M.Farahmand

1) Import NgForm

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

2) Ändern Sie Ihre form definition dieses

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

3) Ändern Sie die Komponente dieser

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

}

Dies würde die Arbeit und Sie erhalten ein Objekt auf die Konsole enthält alle Formular-Werte.

InformationsquelleAutor collinx

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.