Angular 4 中的表单字段默认值

Question

当数据从服务中可用时，表单字段值需要初始化。我正在使用 Reactive Form (Form Builder)。

我想要的只是从表单中获取所有数据，即使它在提交后是否更新。

数据来自在 ngOnInit() 中调用的 getProfile() 函数。

提交表单后，只有更新的字段数据在 (this.form) 对象中可用，但所有数据都来自 userData 只是被忽略了。

因此，我的表格永远无效。

    async getProfile() {
            const observable = await this.userService.getProfile();
            observable.subscribe((res: any) => {
              this.userData= res.data;
            });
          }

      ngOnInit() {
        this.getProfile();
        this.user= {};

        this.form = this.formBuilder.group({
          firstName: ['', [

            Validators.pattern(new RegExp('^[a-zA-ZäöüÄÖÜ]*$'))
          ]],
          lastName: ['', [

            Validators.pattern(new RegExp('^[a-zA-ZäöüÄÖÜ]*$'))
          ]],
          email: ['', [
            Validators.email
          ]],
          city: ['', Validators.required],
          postalCode: ['', [

            Validators.minLength(5)
          ]],
          address1: [''],
          address2: '',
        });

      }

模板

<form *ngIf="form" [formGroup]="form" (ngSubmit)="saveUser()" novalidate>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="firstName">First name</label>
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control" id="firstName" name="firstName" value="userData?.firstname" formControlName="firstName" placeholder="Your First Name">
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label for="lastName">Last name</label>
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control" id="lastName" value="{{userData?.lastname}}" name="lastName" formControlName="lastName" placeholder="Your Last Name">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="form-group">
                <label for="postalCode">Email</label>
                <div class="input-group input-group-sm">
                  <input type="email" class="form-control input-sm" value="{{userData?.email}}" id="email" name="email" formControlName="email" placeholder="Your Email">
                </div>
              </div>
            </div>
          </div>
       </div>
      <br>
      <br>
      <br>
      <br>

      <button [disabled]="form.pristine" type="submit" class="btn btn-grad btn-tn">Update</button>
    </form>

Here is form view after page load

Answer 1

您没有在响应到达后更新表单。试试这个：

observable.subscribe((res: any) => {
  this.form.patchValue(res.data);
});

Angular 4 中的表单字段默认值

Form fields default values in Angular 4

angular

angular4-forms