Angular - 从服务重新填充表单输入

Question

我有一个基本的 Angular 组件，当用户进入个人资料并点击“编辑”时，它允许某人编辑用户的详细信息。

组件：

export class EditUserComponent implements OnInit {

    // Define our vars
    user: Users[];
    editUserForm: FormGroup;
    message: {};
    displayMessage = false;
    userID: number;
    errorMessage: any = '';

    constructor(
        private fb: FormBuilder,
        private _userService: UserService,
        private activatedRoute: ActivatedRoute
    ) {
    }

    ngOnInit(): void {

        // Get the userID from the activated route
        this.activatedRoute.params.subscribe((params: Params) => {
            this.userID = params['id'];
        });

        // Call our service and pass the UserID
        this._userService.getUser(this.userID)
            .then(res => {
                this.user = res;
                this.createForm();
            });

    }

    // Generate the form
    createForm() {
        this.editUserForm = this.fb.group({
            QID: ['', Validators.required],
            favoriteColor: [''],
            favoriteNumber: [''],
            favoriteActor: ['']
        });
    }

}

服务：

// Fetch a single user
    getUser(userID: number) {
        return this._http.post(this.baseUrl + '/fetchUser', { "userID": userID }, { "headers": this.headers })
            .toPromise()
            .then(res => res.json())
            .catch(err => { this.handleError(err); });
    }

界面：

export interface Users {
    RecordID?: number;
    QID: string;
    favoriteColor?: string;
    favoriteNumber?: number;
    favoriteActor?: string;
}

我正在尝试将值传递给我的 formGroup，但我无法弄清楚如何访问这些值。

我以为我可以做这样的事情，我可以访问用户模型并从中选择一个属性，但这会引发未定义的错误。

我是在表单组中传递值还是以某种方式直接将它们绑定到元素？我可以很好地从服务接收数据，只是不确定如何将每个值返回到各自的字段。

createForm() {
    this.editUserForm = this.fb.group({
        QID: [this.user.QID, Validators.required],
        favoriteColor: [''],
        favoriteNumber: [''],
        favoriteActor: ['']
    });
}

Answer 1

如果我理解正确......这就是我的代码的样子：

onProductRetrieved(product: IProduct): void {
    if (this.productForm) {
        this.productForm.reset();
    }
    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
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));
}

我使用patchValue 作为值，setControl 作为数组。

或

由于您是在检索数据后创建表单，因此您可以执行以下操作：

createForm() {
    this.editUserForm = this.fb.group({
        QID: [this.user.QID, Validators.required],
        favoriteColor: [this.user.favoriteColor],
        favoriteNumber: [this.user.favoriteNumber],
        favoriteActor: [this.user.favoriteActor]
    });
}

为了完整……每个输入元素都需要一个 formControlName 属性，如下所示：

                    <input class="form-control" 
                            id="productNameId" 
                            type="text" 
                            placeholder="Name (required)" 
                            formControlName="productName" />
                    <span class="help-block" *ngIf="displayMessage.productName">
                            {{displayMessage.productName}}
                    </span>
                </div>

您可以在此处找到完整的工作示例：https://github.com/DeborahK/Angular2-ReactiveForms

Answer 2

将提交事件绑定到您的表单，然后使用 this.editUserForm.value 访问表单中的数据。

在组件模板中：

<form [formGroup]="editUserForm" (submit)="saveIt()">

在组件中：

  saveIt() {
    if (this.editUserForm.dirty && this.editUserForm.valid) {
      alert(`Number: ${this.editUserForm.value.favoriteNumber} Actor: ${this.editUserForm.value.favoriteActor}`);
    }
  }