Question

我是新来的有角度的用户，想要创建“改善用户个人资料”，其想法是制作新组件以获取当前用户数据并将空的用户数据带入该组件以填充它，依此类推... 对于前。如果用户未填写姓氏，则姓氏的输入字段将出现在要填充的新组件上，然后单击“保存”以保存并显示下一个。现在，我使用它来检查数据是否已填充：

<div *ngIf="student.gender == NA" class="form-group data">
      <label>
          <input type="radio" value="Male" name="gender" [(ngModel)]="student.gender"> Male
      </label>
      <label>
          <input type="radio" value="Female" name="gender" [(ngModel)]="student.gender"> Female
      </label>
  </div>

  <div *ngIf="student.birthdate == NA" class="form-group data">
      <form-date-picker [(ngModel)]="birthdate" [name]="'birthdate'" (newValue)="student.birthdate = $event" ></form-date-picker>
  </div>

  <div *ngIf="student.nationality == NA" class="form-group data">
      <select class="form-control" [(ngModel)]="student.nationality" id="nationality" >
          <option selected="selected" disabled="disabled" value="">Please Select</option>
          <option  *ngFor="let nationalityBean of nationalityBeans" value="{{nationalityBean.name}}" >{{nationalityBean.name}}</option>
      </select>
  </div>

<button class="btn btn-1uni btn-block" (click)="saveBasicData()" >Save</button>

问题是：我不能只显示一个字段“像步骤”。当我选择性别时，性别div消失不保存，直到我单击“保存”按钮。

那么，有什么主意吗？

Answer 1

在选择性别后，性别div消失是合乎逻辑的，因为您的表情不再正确：

您的意思是：如果Student.gender等于NA，则显示该字段。但是，当您选择性别时，student.gender现在不再等于NA，因为它是“男性”或“女性”。

您可以使用@ angular / forms中提供的功能来解决此问题。

编辑：删除了代码示例，以避免混淆。使用下面的代码段。

有关更多信息，请使用官方文档：https://angular.io/api/forms/FormGroupDirective

编辑：我分叉了您的代码片段，并将其调整为您需要的代码：https://angular-48763586-f48k9q.stackblitz.io

Answer 2

我通过创建新变量来像桥梁一样做到了：在component.ts文件上：

newGender: String;

在template.html上：

<div *ngIf="student.gender === 'NA' || gender.dirty">
<!-- Gender will be "dirty" once you've interacted with the input field -->
  <input name="gender" [(ngModel)]="newGender" #gender="ngModel" >
</div>

在提交方法上，只需将newGender分配给student.gender。

angular 2完整的用户个人资料

2 个答案: