Question

您好我想在Angular2中预先填写表单并且不允许用户更改预填充数据。我只想将此预先填充的数据发布到服务器（数据自动从当前登录的用户信息中获取）。

我怎样才能做到这一点？

我的代码。

<form [formGroup]="requestForm" (ngSubmit)="onSubmit()">
    <div class="form-group">

<label class="fontstyle1"><span class="fontstyle2">STEP2. </span>User Information</label>
  <div class="form-group">
      <label class="fontstyle3">Name</label>
      <input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" formControlName="name"[(ngModel)]="selected_name" value="user.name">
    </div>

  <div class="form-group">
      <label class="fontstyle3">E-mail</label>
      <input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" formControlName="email" [(ngModel)]="selected_email" value="user.email">
    </div>

      <div class="form-group">
      <label class="fontstyle3">Phone</label>
      <input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" formControlName="phone" [(ngModel)]="selected_phone" value="user.phone">
    </div>

    <br>

        <button type="submit" id="request-btn">Request</button>

</div>

当我运行它时，结果既不可更改也不预先填充。

帮助！

谢谢！

Answer 1

尝试使用formControlName或ngModel，并禁用输入字段。

<form [formGroup]="requestForm" (ngSubmit)="onSubmit()">
    <div class="form-group">    
      <label class="fontstyle1"><span class="fontstyle2">STEP2. </span>User Information</label>
         <div class="form-group">
            <label class="fontstyle3">Name</label>
            <input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" [(ngModel)]="user.name" disabled>
         </div>

         <div class="form-group">
            <label class="fontstyle3">E-mail</label>
            <input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" [(ngModel)]="user.email" disabled>
         </div>

         <div class="form-group">
            <label class="fontstyle3">Phone</label>
            <input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" [(ngModel)]="user.phone" disabled>
         </div>    
         <br>    
         <button type="submit" id="request-btn">Request</button>   
      </div>
   </div>
</form>

在你的组件中，ngOnInit将数据设置为

ngOnInit(){
   this.apicall.subscribe((info)=>{
       this.currentUser = info;
    }
  );
}

如何在Angular2中创建预填充表单？

1 个答案: