Typescript 使用Angular 7中的数据响应表单初始化

我有一张表格。在ngOnInit（）中，我试图用服务器数据初始化表单。首先我将调用api，然后设置数据。但实际情况是，在数组从api接收数据之前，表单会被初始化。正因为如此，我犯了一个错误

无法读取未定义的属性“get”

标记：

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
       <h2>Users</h2>
       <div class="form-controls">
         <mat-form-field>
           <input matInput placeholder="User name" type="email" formControlName="username">
           <mat-error *ngIf="submitted && formControl.username.errors">
           <mat-error *ngIf="formControl.username.errors.required || formControl.username.hasError('email')"> * Valid
            Email
            required</mat-error>

          </mat-error>
         </mat-form-field>
       </div>
       <div class="form-controls">
         <mat-form-field>
           <input matInput placeholder="First name" type="text" formControlName="firstname">
           <mat-error *ngIf="submitted && formControl.firstname.errors">
             <mat-error *ngIf="formControl.firstname.errors.required"> * First Name required</mat-error>

           </mat-error>
         </mat-form-field>

       </div>
       <div class="button-section">
               <button mat-flat-button color="primary" (click)="closeDailog()" id="cancel"><i class="material-icons">clear</i>Cancel</button>
               <button mat-flat-button color="primary" type="submit" id="create"><i class="material-icons">done</i>Edit</button>

       </div>
 </form>

---

我没有运行代码，但：

subscribe

是asyc，它将在您的服务返回时执行。 设置订阅后，您立即尝试从

this.userDetails

设置属性，该属性在某个时间点可能是

未定义的

您可以尝试类似的方法，或者将您的回复映射到一个可观察的对象，然后使用ngIf和异步管道在模板中订阅该对象

async ngOnInit（）{
this.userDetail=等待this.UserServiceObj.getUserDetailOnID（this.userId.toPromisse（）；
this.userForm=this.formBuilder.group({
用户名：[this.userDetail['username']，[Validators.required，Validators.email]]，
firstname:[this.userDetail['firstname'，Validators.required]）；
}

关于另一部分，你可以在下面找到一个工作表，它可以帮助你修复你的问题

请输入您的用户名和密码

取消
登录

@组件({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.scss']，
})
导出类登录组件{
loginForm=新表单组({
用户名：新表单控件（“”），
密码：new FormControl（“”），
});
构造函数（私有用户服务：用户服务，
专用模式：NgbActiveModal）{
}
登录（）{
this.userService.login（）；
}
关闭（）{
this.modal.close（）；
}
}

我没有运行代码，但是：

subscribe

是asyc，它将在您的服务返回时执行。 设置订阅后，您立即尝试从

this.userDetails

设置属性，该属性在某个时间点可能是

未定义的

您可以尝试类似的方法，或者将您的回复映射到一个可观察的对象，然后使用ngIf和异步管道在模板中订阅该对象

async ngOnInit（）{
this.userDetail=等待this.UserServiceObj.getUserDetailOnID（this.userId.toPromisse（）；
this.userForm=this.formBuilder.group({
用户名：[this.userDetail['username']，[Validators.required，Validators.email]]，
firstname:[this.userDetail['firstname'，Validators.required]）；
}

关于另一部分，你可以在下面找到一个工作表，它可以帮助你修复你的问题

请输入您的用户名和密码

取消
登录

@组件({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.scss']，
})
导出类登录组件{
loginForm=新表单组({
用户名：新表单控件（“”），
密码：new FormControl（“”），
});
构造函数（私有用户服务：用户服务，
专用模式：NgbActiveModal）{
}
登录（）{
this.userService.login（）；
}
关闭（）{
this.modal.close（）；
}
}

这是

component.ts的多功能一体方法吗？

在那里，但我只添加了所需的代码，当你有数据时，当可观察物发出时初始化表单。在里面subscribe@AluanHaddad尝试过，将表单初始化放在subscribe中。表单未使用值初始化，并且也得到了相同的错误是

组件的all-in-one方法。ts

？它在那里，但我只添加了所需的代码，当可观察对象发出数据时初始化表单。在里面subscribe@AluanHaddad已尝试，将表单初始化放置在订阅中。表单未使用值初始化，也出现相同错误我有另一个问题。我有两个按钮，一个是取消，另一个是提交。当我单击“取消反应表单提交”时。很抱歉，我没有看到上面代码中的任何按钮，请使用（单击）在按钮上，提供要与每个按钮一起使用的回调。请注意，一个表单只能有一个提交按钮，另一个可以提供type='button'和一个'click'处理程序。请参见此处：我有另一个问题。我有两个按钮，一个是cancel，另一个是submit。当我单击cancel被动表单提交时。很抱歉，我没有看到上面代码中的任何按钮，请使用（单击）在按钮上，提供要与每个按钮一起使用的回调。请注意，表单只能有一个提交按钮，另一个按钮可以使用type='button'和'click'处理程序提供。请参见此处：

 ngOnInit(){
  this.UserServiceObj.getUserDetailOnID(this.userId).subscribe((res) => {
  console.log(res);
  // this.initializeDetail();
  this.userDetail = res;

  });

  this.userForm = this.formBuilder.group({
  username: [this.userDetail['username'], [Validators.required, Validators.email]],
  firstname: [this.userDetail['firstname'], Validators.required])};
}