Pre-fill input-text-Feldern aus der query params-auf Winkel-2

Ich habe ein Formular auf einer Seite mit 2 Eingabefeldern und wenn ich auf submit klicken, dann den router wechselt zu einer anderen Seite mit 2 Eingabefeldern und einem submit-button.

Bisher habe ich es geschafft das passieren der query params, auf der 2. Seite und pre-gefüllt die Eingabefelder ein.

Problem ist, wenn ich drücken Sie submit-button auf die Seite 2, die Werte aus der Eingabe-Felder werden nicht abgegeben. Wenn ich "touch" - Boxen und geben Sie etwas anderes, dann das senden funktioniert einwandfrei und die bearbeiteten Werte eingereicht werden.

1. Seite ( ich gehe aus dem rest des code, dieser Teil funktioniert ok)

this._router.navigate(['/dashboard/test/new'], 
{ queryParams: {'name': this.name.value , 'lastname':this.lastname.value}});

Seite 2

private subscription: Subscription
paramName: string;
paramLastName: string

this.subscription = this.activatedRoute.queryParams.subscribe(
  params => {
    this.paramName     = params['name'];
    this.paramLastName = params['lastname'];
  }
)

Und hier die html:

<form [formGroup]="myFormTest" (ngSubmit)="onSubmitNew()" class="onl_loginForm" novalidate>
      <div class="form-group">
        <label for="name" class="control-label">Name </label>
        <input type="text" formControlName="name" class="form-control" id="name"  value="{{paramName}}" required>
      </div>
      <div class="form-group">
        <label for="lastname" class="control-label">Last Name </label>
        <input type="text" formControlName="lastName" class="form-control" id="lastname" value="{{paramLastName}}" required>
      </div>
<button type="submit" class="btn-save">Submit</button>
</form>

Wie kann ich die Kraft der form zu "Lesen" die zwei input-Felder-Werte, ohne Sie zu berühren?

InformationsquelleAutor Stathis Ntonas | 2016-10-29
  1. 8

    NOTE : Nicht verwenden "{{}}" zusammen für Bindungen.

    1) können Sie entweder [(ngModel)] ,

    <input type="text" formControlName="name" 
                   class="form-control" id="name"  
                   [(ngModel)]="paramName" required>

<input type="text" formControlName="lastName" 
                   class="form-control" id="lastname" 
                   [(ngModel)]="paramLastName" required>

    2) ODER [value] zu binden Eigenschaft angular2 Weg,

    <input type="text" formControlName="name" 
                   class="form-control" id="name"  
                   [value]="paramName" required>

<input type="text" formControlName="lastName" 
                   class="form-control" id="lastname" 
                   [value]="paramLastName" required>
    • Danke! Die [(ngModel)] - Methode gearbeitet, die [Wert] vorgefüllte die input-Boxen, aber Sie wurden eingereicht als null (wie in meinem code).
    • Ja werden Sie nicht, da Sie einfach binden Sie den Wert. Während Anmeldeformular verwendet formControl. Also das wird nicht funktionieren. Wenn Sie wollen, dass Sie arbeiten, sollten Sie ( im TS-code - ich glaube, Sie sind mit formBuilder) so etwas wie name:[paramName , ....] syntax.
    InformationsquelleAutor micronyks
Schreibe einen Kommentar