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

1 个答案: