Question

我想填写更新表单字段，以在页面加载时填充用户现有数据。＆我正在调用用于在我的component.ts文件中获取用户数据的函数，

ngOnInit() {
        const res = this.getUserDetails();
        console.log(res);

        this.updateForm = this.fb.group({
            name: [this.userData.name, Validators.required],
            email: [this.userData.email, [Validators.required, Validators.email]],
            mobile: [this.userData.mobile, Validators.required],
            image: [this.userData.image]
        });
    }
getUserDetails() {
        this.amen.getUserDetails(this.params).subscribe(
            (response) => {
                this.handleResponse(response);
                console.log('Response------------------------', response);
                return response;
            },
            (error) => {
                console.log('Error: ', error);
            }
        );
    }

    handleResponse(response) {
        return this.userData = {
            name: response.responseData.name,
            email: response.responseData.email,
            mobile: response.responseData.mobile,
            image: response.responseData.user_img
        };
    }

但是它在这一行给了我未定义的内容，而且数据也没有以反应形式显示

console.log(res);

Answer 1

使用 patchValue

尝试这样：

this.amen.getUserDetails(this.params).subscribe(
        (response) => {
            this.updateForm.patchValue(this.handleResponse(response));
            ...
        },
        (error) => {
            console.log('Error: ', error);
        }
    );

说明：在反应式表单中，如果需要从组件类更新表单上的输入元素，则可以使用setValue和patchValue

当我们只想更改表单元素的一个子集而不更改表单的所有元素时，我们使用patchValue。对于所有元素，请使用setValue

Answer 2

这是因为您是在实际从服务器获取值之前分配值的。放

const res = this.getUserDetails();
console.log(res);

在您的订阅方式内部，您将得到想要的东西

如何在“反应形式”字段中传递响应值？

2 个答案: