javascript - 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，但我无法弄清楚如何访问这些值。

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

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

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