如何将输入类型的隐藏值=隐藏绑定到Angular6中的模型

Question

在这里，我正在创建一个列表表单，用户可以在登录网站后列出那里的数据。我想在用户提交表单时也添加用户名。在列表表单中，我使用了输入类型=隐藏在其中用户名。 我想将此用户名值添加到我的列表模型并将模型的值传递给数据库我想将模板驱动表单的隐藏字段的值绑定到我的角度应用程序的模型

我从 api 获取这个用户名

下面是我的 angular6 模板驱动表单

<form #listingForm="ngForm" (ngSubmit)="OnSubmit(listingForm)" style="margin-top:100px">
  <div class="container">
    <div class="row">
      <div class=" col-md-offset-1 col-md-10 col-md-offset-1" style="padding-top:35px;margin:0 auto;box-shadow: 1px 2px 6px 0px rgba(102,102,102,0.73);">
        <h3 style="color:black">Add Your Listing Here</h3>
       
        <hr>
        <div *ngIf="userClaims">
        <input type="hidden" #Username="ngModel" [(ngModel)]="userClaims.Username" [value]="list.Username" name="Username">
      </div>
        <div class="row" style="padding-top:50px;">
            <div class="col-sm-6">
               <label for="">Business Name</label>
            <input type="text" #BName="ngModel" [(ngModel)]="list.BName" name="BName">
            </div>
            <div class="col-sm-6">
                <label for="">Business Tagline</label>
             <input type="text" #BTagline="ngModel" [(ngModel)]="list.BTagline" name="BTagline">
             </div>
            
        </div>
        


        <div class="clearfix">

          <button type="submit" class="signupbtn" >Sign Up</button>
        </div>
      </div>
    </div>
  </div>
</form>

下面是我的listing.model.ts

    export class Listing {
   
    }

我从我的应用程序的其他服务中获取用户名

Answer 1

为什么不将 userClaims.Username 分配给ts文件本身中的list.Username并使其变得简单

<input type="hidden" #Username="ngModel" [(ngModel)]="list.Username" name="Username">

您也可以删除上述隐藏输入，因为它不会影响任何内容。

Answer 2

通过使用以下方法，我可以绑定值

<input type="hidden" #Username="ngModel" [(ngModel)]="userClaims.Username" 
 name="Username">