Question

我正在使用angular7，试图在文本框中显示值，但从后端获取值，但是我不知道如何在文本框中显示值，有人可以建议我吗？

我正在使用Loopback和angular7

file.component.ts

   ngOnInit() {
let userId = window.localStorage.getItem("editUserId");
if(!userId) {
  alert("Invalid action.")
  this.router.navigate(['list-user']);
  return;
}
alert(userId)
this.editForm = this.formBuilder.group({
  id: [''],
  name: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  age: ['', Validators.required],
  salary: ['', Validators.required]
});
this.apiService.getUserById(+userId)
  .subscribe( data => {
    this.editForm.setValue(data);
    //alert(data)
  });
}

file.component.html

     <div class="hidden">
  <input type="text" formControlName="id" placeholder="id" name="id" class="form-control" readonly="true">
</div>
<div class="form-group">
  <label for="name">User Name:</label>
  <input type="text" formControlName="name" placeholder="name" name="name" class="form-control" id="name" readonly="true">
</div>

Answer 1

您可以使用this.editForm .controls['firstName'].setValue(data.firstName);设置的值

另一种解决方案，您可以将setValue更改为patchValue方法this.editForm.patchValue(data)；

示例：

 var data= {firstName: 'Hien', lastName : 'Nguyen', email: 'hien@gmail.com'};

 this.editForm .controls['firstName'].setValue(data.firstName);
 this.editForm .controls['lastName'].setValue(data.lastName);

演示：

https://stackblitz.com/edit/angular-7-reactive-form-validation-test

Answer 2

您需要将输入值绑定到component属性。如果您可以提供StackBlitz（或其他编辑器），我们将能够帮助您解决特定问题。

<div class="hidden">
  <input type="text" formControlName="id" placeholder="id" name="id" class="form-control" readonly="true">
</div>
<div class="form-group">
  <label for="name">User Name:</label>
  <input type="text" formControlName="name" placeholder="name" name="name" class="form-control" id="name" readonly="true" [ngModel]="editForm.name">
</div>

我推荐this documentation for more information

Answer 3

您可以使用为表单对象提供的补丁值API！

this.editForm = this.formBuilder.group({
  id: [''],
  name: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  age: ['', Validators.required],
  salary: ['', Validators.required]
});
this.apiService.getUserById(+userId)
  .subscribe( data => {
    this.editForm.patchValue({
         id: data.id,
         name: data.name
         firstName: data.firstName,
         lastName:data.lastName,
         age:data.age,
         salary: data.salary
  });
}

如何从angular7的后端在文本框中显示值

3 个答案: