Реактивная форма для просмотра / обновления не привязана к FormBuilder

Question

Я собираюсь заранее извиниться, так как думаю, что упускаю здесь что-то очевидное.

Я новичок в кодировании, и я пытаюсь использовать ту же форму для просмотра и редактирования данных из HTTP API. Я могу отобразить детали записи (код: кодовое имя и описание), однако поля не заполняются в моем FormBuilder.

Код-details.component.html

div *ngIf="code" class="card w-50 p-3">
    <h5 class="card-title">Code</h5>
    <div class="card-body">
        <p class="card-text"></p>
        <form [formGroup]="editCodeForm" novalidate>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" name="id">{{code.id}}</span>
                    <input type="text" 
                        class="form-control" 
                        formControlName="codeName"
                        [value] ="code.codeName" 
                        placeholder="code name">

                    <input type="text" 
                        class="form-control" 
                        formControlName="description" 
                        [value] ="code.description" 
                        placeholder="description">
                </div>
                <div>
                    <button class="btn btn-primary" 
                        [disabled]="editCodeForm.pristine" 
                        (click)="updateCode(this.editCodeForm.value)">Update
                    </button>
                    <button class="btn btn-primary"(click)="delete(this.editCodeForm.value)">Delete</button>
                    <button class="btn btn-primary"routerLink="/add">New</button>
                    <button class="btn btn-primary" (click)="goBack()">Back</button>
                </div>
            </div> 
        </form> 
    </div>
    <p>editCodeForm value: {{ editCodeForm.value | json}}</p>
</div>

код-details.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Code } from './code.component';
import { ApiService } from '../api.service'

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

@Component({
  selector: 'code-details',
  templateUrl: './code-details.component.html'
})
export class CodeDetailsComponent implements OnInit {

  @Input() code: Code[];
  editCodeForm

  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private api: ApiService,
    private fb : FormBuilder
  ) {

    this.editCodeForm = fb.group({
      id: [{value: null, disabled:true}],
      codeName: ['',Validators.required],
      description: [''],
    })
  }

  ngOnInit() {
    this.getCode()
  }

  getCode(): void {
    const id = +this.route.snapshot.paramMap.get('id');

    if (id) {
      this.api.getCode(id)
        .subscribe((code: Code[]) => this.code = code);
    }
  }
}

api.services.ts

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Subject } from 'rxjs'
import { Code } from './codes/code.component'

@Injectable()

export class ApiService {

private selectedCode = new Subject<any>(); // holds reference to clicked item in list
codeSelected= this.selectedCode.asObservable(); // subscribe

constructor(private http: HttpClient) {}

getCodes() {
    return this.http.get('http://localhost:58561/api/codes');
}

}

Значения формы, отображаемые в нижней части html-страницы, являются пустыми при редактировании формы. Я пытался найти способ представления модели данных в модели формы, чтобы пользователь мог обновить ее и отправить, но в настоящее время она не работает.

Любые указатели приветствуются:)

Ура, Адам

Answer 1

В моем приложении я настроил свою форму следующим образом:

ngOnInit(): void {
    this.productForm = this.fb.group({
        productName: ['', [Validators.required,
                           Validators.minLength(3),
                           Validators.maxLength(50)]],
        productCode: ['', Validators.required],
        starRating: ['', NumberValidators.range(1, 5)],
        description: ''
    });
}

Затем, когда я получаю данные с внутреннего сервера, я делаю такой код, чтобы заполнить форму данными:

onProductRetrieved(product: IProduct): void {
    this.product = product;

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
}

Это метод, который получает продукты и вызывает `onProductRetrieved:

getProduct(id: number): void {
    this.productService.getProduct(id)
        .subscribe(
            (product: IProduct) => this.onProductRetrieved(product),
            (error: any) => this.errorMessage = <any>error
        );
}

И вы можете удалить [value] директива в вашем HTML, так что она не конкурирует с тем, что делает код выше.

Вы можете найти полный набор кода в моем github здесь: https://github.com/DeborahK/Angular2-ReactiveForms

В папке APM-Updated