在Angular 7中对数据进行表单初始化 [英] React form initialization with data in Angular 7

问题描述

我已经编辑了反应形式.在ngOnInit()中，我尝试使用服务器数据初始化表单.首先，我将调用api，然后设置数据.但是正在发生的事情是，在数组从api接收数据之前，要初始化表格.因此，我遇到了错误

I have edit reactive-form. In ngOnInit() I'm trying to initialize the form with server data. First I will call api and then the data is set. But what is happening is that before array receives data from api, the form get initialized. Because of that I am getting an error

无法读取未定义的属性'get'

Cannot read property 'get' of undefined

标记:

 <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>

代码: component.ts :

 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])};
}

推荐答案

我没有运行代码，但是: subscribe 是asyc，它将在您的服务返回时执行.设置订阅后，您立即尝试从 this.userDetails 设置属性，该属性在时间点上可能是 undefined

I did not run the code but: subscribe is asyc and it will execute when your service returns. Immediately after setting up a subscription you try to set properties from this.userDetails that at the point of time can be undefined

您可以尝试类似的操作，也可以将回复映射到Observable，然后可以使用ngIf和异步管道 https://angular.io/tutorial/toh-pt6

You can try something like this or map your reply to an Observable which you can than subscribe to in your template with ngIf and async pipe https://angular.io/tutorial/toh-pt6

async ngOnInit() {
  this. userDetail  = await this.UserServiceObj.getUserDetailOnID(this.userId).toPromisse();

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

}

关于其他部分，您可以在下面找到工作表格，这应该可以帮助您解决问题

Regarding the other part you can find a working form below it should help you to fix yours

<div class="p-3">
  <p>Please enter your username and password.</p>
  <form [formGroup]="loginForm" (ngSubmit)="login()">
    <div class="row form-group">
      <div class="col">
        <input type="text" class="form-control" placeholder="Username" formControlName="username">
      </div>
    </div>
    <div class="row form-group">
      <div class="col">
        <input type="password" class="form-control" placeholder="Password" formControlName="password">
      </div>
    </div>
    <div class="text-center">
      <button type="button" class="btn btn-outline-secondary mr-3" (click)="close()">Cancel</button>
      <button type="submit" class="btn btn-outline-primary">Login</button>
    </div>
  </form>
</div>

@Component({
  selector:    'app-login',
  templateUrl: './login.component.html',
  styleUrls:   ['./login.component.scss'],
})
export class LoginComponent {

  loginForm = new FormGroup({
    username: new FormControl(''),
    password: new FormControl(''),
  });

  constructor(private userService: UserService,
              private modal: NgbActiveModal) {
  }

  login() {
    this.userService.login();
  }

  close() {
    this.modal.close();
  }
}

这篇关于在Angular 7中对数据进行表单初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！