Pre-Bevölkern Eingabefeld in `FormGroup` - Angular2

Ich bin mit Angular2 - Reaktive Formen. Alles funktioniert gut, bis ich zeigen möchte, eine voreingestellte Wert in eines der Felder im Formular.

Szenario: gibt Es mehrere buttons auf einer Seite und jeder button öffnet ein Formular mit Feldern wie

  1. Namen
  2. E-Mail
  3. Nachricht
  4. Produkt-Code --> Wert für diese gelten bereits als pro item code aus service.

Scheitern Szenario: Produkt-Code Eingabe-Wert stellt sich auf null.

TS Code:

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
queryForm: FormGroup;
constructor(private _productService: ProductService, fb: FormBuilder) {
    this.queryForm = fb.group({
        'name': [null, Validators.compose([Validators.required, Validators.minLength(5)])],
        'email': [
            null, [Validators.required, Validators.email]
        ],
        'message': [null,Validators.compose([Validators.required, Validators.minLength(5)])],
        'pcode': [
            null
        ],
    })
}

HTML-Formular:

<div *ngFor="let item of product">
<form action="#" [formGroup]="queryForm" 
 (ngSubmit)="submitForm(queryForm.value)" method="post" 
  novalidate="" class="text-left note" id="f_{{item.productId}}">
    [ .... rest of the fields ...]
    <div class="form-group hidden">
          <input type="hidden " class="form-control " id="pcode " name="pcode" 
        formControlName="pcode" [value]="item.productCode" />
     </div>
     <div class="form-group">
           <button type="submit" class="btn1" [disabled]="!queryForm.valid">Submit</button>
      </div>
</form>
</div>

Wie kann ich das erreichen?

  • Beachten Sie, dass Ihre Frage erwähnt, dass Sie mithilfe von Vorlagen-Formulare - aber FormGroup, FormBuilder etc sind für reaktive Formen - was bedeutet, dass die Erstellung und Verwaltung der Formulare sind die Gefahren, die von der Komponente code, nicht deine Vorlage, also dem Ansatz, die Sie beabsichtigen zu verwenden: template oder reaktiv?
  • die obige Frage könnte scheinen, wie es ist irrelevant, aber es sei denn, Sie wissen, was Sie tun, das mischen der beiden Ansätze wird nur verwirren Sie
  • Oops.. Reaktive Formen
InformationsquelleAutor Gags | 2017-04-17
  1. 7

    UPDATE: Wie wir erfahren, sind Sie brauchen einen formArray statt einer einzigen formControl. So erklären, dass beim erstellen der form:

    this.queryForm = this.fb.group({
  arrayOfData: this.fb.array([]) //name a proper name to array
})

    Können Sie setValue oder patchValue wenn Sie haben Ihre Daten erhalten, wo Sie Durchlaufen die Reaktion und die patch die Werte der Formular-array. Rufen Sie patchValues-Methode in Ihrer callback (abonnieren).

    patchValues() {
  const control = <FormArray>this.queryForm.controls.arrayOfData;
  this.items.forEach(x => {
    control.push(this.patchValue(x.first_name, x.pcode))
  })
}

patchValue(name, code) {
  return this.fb.group({
    name: [name],
    pcode: [code]
  })    
}

    In Ihrer Vorlage Durchlaufen der formarray und auch daran denken, das formgroupname (index):

    <div formArrayName="arrayOfData">
  <div *ngFor="let code of queryForm.controls.arrayOfData.controls; let i = index">
    <div formGroupName="{{i}}">
      <label>Name: </label>
      <input formControlName="name" /><br>
      <label>Product Code: </label>
      <input formControlName="pcode" /><br>
    </div>
  </div>
</div>

    Demo

    Original Antwort:

    Sollten Sie immer die form-Werte in der Komponente, nicht die Vorlage. Sie können patchValue oder setValue, wenn Sie erhalten haben, der Wert aus dem service... so können Sie dies tun, e.g innerhalb der callback (abonnieren):

    this.myService.getSomeData()
  .subscribe(data => {
     this.item = data;
     this.queryForm.patchValue({pcode: this.item.productCode})
  });

    Dann brauchen Sie nicht zu verwenden [value]="item.productCode" in Ihrer form, dieser Wert wird mit dem Formular-Steuerelement statt.

    Demo

    • Wo muss ich subscr\ibe das ?
    • Nun, dies ist nur ein Beispiel, sagte Sie, Sie erhalten Ihren Wert aus dem service, also, wenn Sie erhalten Ihren Wert für item, dann verwenden Sie patchValue, um den Wert, die Sie bekommen haben 🙂
    • Dann ist dieses pcode zugeordnet werden, für jede form, die ich habe auf der Seite?
    • "jede form ich habe auf der Seite", nicht sicher, was du meinst?? BTW, aktualisierte Antwort mit einem demo.
    • es bedeutet, dass service gibt Haufen von Produkten und die jeweils zu jedem Produkt gibt es mehrere Formen. Also jede form wird das hold-Wert der P-Code zurückgegeben vom Dienst für jedes Produkt
    • Ich habe absolut keine Ahnung von was du redest. Sie brauchen, um code, sonst ist es unmöglich dir zu helfen. Bitte Gabel die plunker und reproduzieren Sie das Problem dort, vielleicht kann ich helfen 🙂
    • Lassen Sie uns weiter, diese Diskussion im chat.
    • http://plnkr.co/edit/3aTYorayo1gwboBeKIcH?p=preview .. Gabel die plunker... wenn ich mehrere P-Code in json.. dann ist es nicht Wert
    • Sie müssen Durchlaufen und erstellen Sie eine formarray wenn Sie mehrere Felder. FormControl funktioniert nur mit einem Wert.
    • Yup.. das ist was ich Suche, für... jede Hilfe wäre sehr geschätzt 🙂
    • Aktualisierte Antwort, jetzt sollte das sein, was Sie wollen 🙂

    InformationsquelleAutor AJT82
Schreibe einen Kommentar