Chcę załadować istniejącą wartość do FormControl, aby móc zaktualizować wartość w mojej bazie danych.

Mój kod (skrócony i sprowadzony do przykładu) wygląda następująco. Kliknięcie przycisku edycji spowoduje załadowanie nazwy odsyłającej z tablicy do FormControl.

Składnik aplikacji

import { Component } from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {

  nameForm = new FormControl(['']);
  names = ['Peter', 'Bob', 'Mary']

  updateName (id : number): void {
      this.nameForm.setValue(this.names[id]);
  }   
}

Szablon HTML

 <table>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Actions</th>
            </tr>
            <tr *ngFor="let name of names; index as i">
                <td>{{i + 1}}  : </td><td>{{name}}</td>
                  <td>
                    <button (click)="updateName(i)">Edit</button>
                  </td>
            </tr>
    </table>
<input type="text" formControlName="nameForm">

Przykład utworzyłem na https://stackblitz.com/edit/angular-m7vm4y. Kliknięcie edycji nie ustawia wartości w FormControl. Gdzie jest mój błąd?

Dzięki i pozdrawiam!

0
Hellma 1 kwiecień 2020, 23:31

4 odpowiedzi

Najlepsza odpowiedź

Możesz zawinąć formularz w grupę formularzy i ustawić wartość przy jej użyciu. Spróbuj wykonać następujące czynności

Kontroler

import { Component } from '@angular/core';
import {FormGroup, FormControl, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form: FormGroup = new FormGroup({
    nameForm: new FormControl('')
  });
  names = ['Peter', 'Bob', 'Mary']

  updateName (id : number): void {
    this.form.get('nameForm').setValue(this.names[id]);
  }
}

Szablon

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Actions</th>
  </tr>
  <tr *ngFor="let name of names; index as i">
    <td>{{i + 1}}  : </td><td>{{name}}</td>
    <td>
      <button (click)="updateName(i)">Edit</button>
    </td>
  </tr>
</table>
<form [formGroup]="form">
  <input type="text" formControlName="nameForm">
</form>

Zmodyfikowałem Twój Stackblitz

0
Michael D 1 kwiecień 2020, 20:45
<input type="text" [formControl]="nameForm">

Ponieważ potrzebujesz formGroup dla formControlName.

0
satanTime 1 kwiecień 2020, 20:43

Prosta poprawka, zmień tę linię:

<input type="text" formControlName="nameForm">

Do tego:

<input type="text" [formControl]="nameForm">


formControlName jest używany jako część FormGroup, aby efektywnie odwoływać się do dziecka w tej grupie za pomocą ciągu nazwy dziecka, prawie tak, jak przekazałbyś klucz do obiektu za pomocą {{ X2}}

Jeśli nie używasz FormGroup jako rodzica dla swoich FormControl, to po prostu musisz powiązać to FormControl bezpośrednio z elementem HTML, stąd nawiasy kwadratowe.

0
nate-kumar 1 kwiecień 2020, 20:47

Spróbuj dodać grupę FormGroup, jak pokazano poniżej:

HTML:

<form [formGroup]="form">
 <input type="text" formControlName="name">
</form>

TS:

name = new FormControl(['']);
names = ['Peter', 'Bob', 'Mary']
form: FormGroup;

constructor(private fb: FormBuilder){
 this.form=this.fb.group({
   name:['']
 })
}

updateName (id : number): void {
  this.form.get('name').setValue(this.names[id]);
}

Aby uzyskać więcej informacji, zobacz:

https://angular.io/guide/reactive-forms

Mam nadzieję że to pomoże

1
Anoop Rajasekhara Warrier 2 kwiecień 2020, 07:53