javascript - 如何在 Angular 表单中设置字段值

Question

我正在尝试在 ngOnInit() 执行的 .ts 中填充“user_details”对象时设置视图字段值。

这是我填充 user_details 对象的 .ts 。

export class ProfileComponent implements OnInit {

  user_details = {
    name: '',
    first_surname: '',
    second_surname: '',
    age: '',
    birdth_date: '',
    location: '',
    phone: '',
    image: ''
  };
  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit(): void {
    this.authService.getProfile()
    .subscribe(
      res => {
        this.user_details = res;
        console.log(this.user_details)
      },
      err => console.log(err)
    );
  }

如您所见，该对象正在获取正确的数据。

这是我需要填写字段的表格。

<div class="container p-4">
    <form (submit)="updateProfile()">
    <div class="row d-flex justify-content-center text-white">
        <div class="col-md-6">
                <div class="form-group">
                  <label for="name">Name</label>
                  <input type="text" [(ngModel)]="user_details.name" value={{user_details.name}} name="name" class="form-control" id="name" placeholder="Name">
                </div>
                <div class="form-group">
                  <label for="first_surname">First surname</label>
                  <input type="text" [(ngModel)]="user_details.first_surname" name="first_surname" value={{user_details.first_surname}} class="form-control" id="first_surname" placeholder="First surname">
                </div>
...

如何使用此对象数据设置视图字段的值？我需要在视图中显示“user_details”字段，而我的视图是空的。

谢谢阅读！

标签： javascriptangular

Answer 1

最好的方法是使用Reactive Forms，因为它提供了许多您可能需要在表单中使用的功能。我试图在代码沙箱中重新创建您的代码，请看一下，因为我能够解决它，

<div class="form-group">
<label for="first_surname">Name</label>
<input
  type="text"
  [(ngModel)]="user_details.name.first"
  name="first_surname"
  value="user_details.name.first"
  class="form-control"
  id="name"
  placeholder="Name"
/>