Eckige 2 - Wie automatisch binden Objekt-Werte bezogen auf die Formular-Steuerelemente?

Ich bin mit model driven forms und ich bin auf der Suche eine bessere Möglichkeit die Daten zu binden Bezug auf formControlName's, weil ich mehr als 25 Felder auf meinem Formular, und ich will nicht zu haben, um zu schreiben, dass code für alle Felder wie ich geschrieben habe für unten.

Vorlage:

<input type="text"
       class="form-control"
       formControlName="firstName"
       name="firstName"
       placeholder="First Name"
       required>

Komponente:

this.refferalService.getReferringDataEdit(id).subscribe(
  result => {
    this.referringData = result.responseObject;
    this.refferalForm.patchValue({ 
      firstName: this.referringData.firstName 
    })
  }
)

Gibt es einen Weg, es zu tun "automatisch"?

InformationsquelleAutor Hitesh | 2017-02-22

  1. 7

    Kannst du es so machen : 

    import {FormGroup,FormBuilder,FormControl} from '@angular/forms';

export class formComponent{
  myForm : FromGroup
  constructor(fb: FormBuilder){
    this.myForm= fb.group({
        'firstName' : [''],
        'lastName' : [''],
    });
 }
 onSubmit(value:string){
   console.log(form);
 }
}

    Später in Ihrem HTML-verwenden Sie es wie :

    <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)">
<input type="text" placeholder="FirstName" [formControl] = "myForm.controls['firstName']">

<input type="text" placeholder="LastName" [formControl] = "myForm.controls['lastName']">
<button type="submit">Submit</button>
</form>

    und binden Sie es mit (ngSubmit) . Also, Wann immer Sie trifft den reichen , den Wert, der sich in myForm.Wert . myForm wird das Formular gespeichert werden als Schlüssel/Wert-Paaren.

    In der Konsole Ausgabe :

    Object : 
firstName:....
lastName: ...

    Finden Sie unter : http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

    EDIt: Da die Anforderung war, die Daten zu speichern aus dem Dienst:

    In Ihrem abonnieren, nur tun Sie dies : this.refferalForm.setValue(this.referringData); setValue erwartet ein Objekt mit den Schlüssel/Wert-Paare

    Hallo, ich habe bereits diese Dinge, um Daten zu speichern. Ich möchte wissen, wie zum binden von Daten auf relative Control zu Bearbeiten/aktualisieren.
    in Ihrem abonnieren, Nur tun Sie dies : diesem.refferalForm.setValue(dies.referringData); setValue erwartet ein Objekt mit den Schlüssel/Wert-Paaren .
    Ich bin mit ngx-mydatepicker für Datums-Auswahl, und ich oben verwendet.refferalForm.patchValue(dies.referringData) binden Daten, aber es wird nicht von bind date. Irgendeine Idee, wie zu binden, Datum?

    InformationsquelleAutor CruelEngine

  2. 5

    Ich sehe zwei Möglichkeiten, dies zu tun:

    Erster Ansatz:

    Könnten Sie eine Allgemeine Methode, die für beide "Formen" (neu/Bearbeiten), und erstellen Sie das Formular mit oder ohne der Werte, auf diese Weise:

    ngOnInit() {
  //Imagine that the data is coming from API:
  const referringData = { firstName: 'First', lastName: 'Last' };
  this.initForm(referringData);
}

private initForm(data = {}): void {
  //Note that you can pass nothing to this function, 
  //so the values will be initially undefined (no problem with that)

  this.myForm = this.formBuilder.group({
    firstName: [data.firstName, [Validators.required]],
    lastName: [data.lastName, [Validators.required]]
  });
}

    DEMO

    Zweiter Ansatz:

    In diesem Ansatz können Sie binden Sie es automatisch mit [(ngModel)], so brauchen Sie nicht, nichts zu tun in der Komponente Datei.

    ngOnInit() {
  //Imagine that the data is coming from API:
  this.referringData = { firstName: 'First', lastName: 'Last'};

  //init the form as always
}

    Und in Vorlage verwenden [(ngModel)], um binden die Werte:

    <input type="text" formControlName="firstName" [(ngModel)]="referringData.firstName">

<input type="text" formControlName="lastName" [(ngModel)]="referringData.lastName">

    DEMO

    Prüfen Sie die vollständigen Quellen für beide Ansätze vor.

    Hinweis:

    Obwohl es gibt nichts irgendwo zu sagen, dass Sie nicht verwenden können beide FormsModule mit ReactiveFormsModule ist, würde ich nicht gehen mit diesem, ich würde lieber die erste Methode zu verwenden.

    InformationsquelleAutor developer033

  3. -1

    Zu binden oder ersetzen Sie den dynamischen Wert Wert fromControl, wir können patchValue Methode. 

    HTML Code :

 <mat-form-field appearance="outline">
                <mat-label>Email</mat-label>
                <input matInput formControlName="email"  >
                <mat-icon matSuffix class="secondary- 
                text">mail</mat-icon>

 </mat-form-field>    

Component Code :

ngOnInit () {
/** This create form group */
 this.resetPasswordForm = 
    this._formBuilder.group({
        email:new FormControl({ value: '', disabled:true }),
    });
    this.updateEmail()
}

updateEmail(){
    /** Update value of formControl */
     this.resetPasswordForm.patchValue({
            email: '[email protected]'
 });
}

    InformationsquelleAutor Rohit Parte

Schreibe einen Kommentar