查看/更新未绑定到 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
        );
}

并且您可能想要删除 HTML 中的 [value] 指令，这样它就不会与上面的代码的作用相冲突。

你可以在我的github这里找到完整的代码集：https://github.com/DeborahK/Angular2-ReactiveForms

文件夹中 APM-Updated

查看/更新未绑定到 FormBuilder 的反应式表单

Reactive Form to view / update not bound to FormBuilder

angular

angular2-formbuilder