setValue в FormControl не отражается в View

Question

Я хочу загрузить существующее значение в FormControl, чтобы иметь возможность обновить значение в моей базе данных.

Мой код (сокращенный и сведенный к примеру) выглядит следующим образом. Нажатие на кнопку редактирования должно загрузить имя ссылки из массива в FormControl.

Компонент приложения

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

HTML -Template

 <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">

Я построил пример на https://stackblitz.com/edit/angular-m7vm4y. Нажатие на редактирование не устанавливает значение в FormControl. Где моя ошибка?

Спасибо и всего наилучшего!

Answer 1

Пожалуйста, попробуйте добавить FormGroup, как показано ниже:

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

Для получения дополнительной информации см .:

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

Надеюсь, это поможет

Answer 2

Вы можете обернуть форму в группу форм и установить значение, используя ее. Попробуйте следующий

Контроллер

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

Шаблон

<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>

Я изменил ваш Stackblitz

Answer 3

Простое исправление, измените эту строку:

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

на это:

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

---

formControlName is используется как часть FormGroup, чтобы эффективно ссылаться на дочернего элемента в этой группе со строковым именем дочернего элемента, почти так же, как если бы вы передавали ключ к объекту, используя object[ 'key' ]

Если вы не используете FormGroup в качестве родителя для своих FormControl s, тогда вам просто нужно привязать этот FormControl непосредственно к элементу HTML, следовательно, в квадратных скобках.

Answer 4

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

потому что вам нужна formGroup для formControlName.