Question

我想隐藏用户的这两个字段，并在后台提供它的数据。当我做控制台时，我在这些领域得到了不确定。

<form [formGroup]="fb" (ngSubmit)="createData()">
  <ion-item class="form-group">
    <ion-label floating>User name</ion-label>
    <ion-input type="text" [value]="username" id="username" class="form-control" formControlName="username"></ion-input>
  </ion-item>

  <ion-item class="form-group">
    <ion-select interface="action-sheet" formControlName="destinationid">
      <ion-option *ngFor="let destinationid of destinations" [value]="destinationid._id">{{destinationid._id}}</ion-option>
    </ion-select>
  </ion-item>
</form>

我的组件的formbuilder是;

  username='swara';
  destinations = ['china','korea','japan'];
    this.fb = formBuilder.group({
  //some field removed
  username: [this.username],
  destinationid: formBuilder.array([this.destinationid])
});

Answer 1

您可以使用'hidden'属性，它会在CSS中为您的HTML元素设置display:none，而不会从DOM中删除它。

要使用它，请添加[hidden]="some boolean"

<form [hidden]="some boolean" [formGroup]="fb" (ngSubmit)="createData()">
  <ion-item class="form-group">
    <ion-label floating>User name</ion-label>
    <ion-input type="text" [value]="username" id="username" class="form-control" formControlName="username"></ion-input>
  </ion-item>

  <ion-item class="form-group">
    <ion-select interface="action-sheet" formControlName="destinationid">
      <ion-option *ngFor="let destinationid of destinations" [value]="destinationid._id">{{destinationid._id}}</ion-option>
    </ion-select>
  </ion-item>
</form>

隐藏一些表单字段并在后台提供数据

1 个答案: