javascript - Angular,当model.id大于0时显示formgroup
问题描述
我有一个表单组实例,需要在“model.id > 0”时显示带有 formControlName 属性的输入,否则显示没有该属性的输入。
但是当我这样做时,我得到一个错误“formGroup 需要一个 FormGroup 实例。请传入一个。”
我该如何解决这个问题?
<form [formGroup]="form">
<div class="margin_bottom__25">
<div class="form-group row">
<label for="legalName" class="col-sm-2 form-control-label">{{'STRUCTURES_AND_BRANCHES.branch.branch' | translate}}</label>
<div class="col-sm-4">
<span class="form-content" *ngIf="!stateVM.isLegalNameEditable">{{model.legalName}}</span>
<input *ngIf="stateVM.isLegalName" formControlName="legalName" id="legalName" name="legalName" type="text" class="form-control"
placeholder="{{'STRUCTURES_AND_BRANCHES.branch.branch_tab.basic_details.legalName_placeholder' | translate}}">
<input *ngIf="model.id < 1" name="legalName" type="text" class="form-control"
placeholder="{{'STRUCTURES_AND_BRANCHES.branch.branch_tab.basic_details.legalName_placeholder' | translate}}">
</div>
<div class="col-sm-6">
<div *ngIf="!stateVM.isLegalNameEditable">
<button [elementAccess]="FormEnum.HeadquarterAndBranch" class="btn btn-purple pull-right" (click)="toggleLegalNameEdit()">
<i aria-hidden="true" class="fa fa-pencil"></i>
<span>{{'STRUCTURES_AND_BRANCHES.branch.edit_btn' | translate}}</span>
</button>
</div>
<div *ngIf="stateVM.isLegalNameEditable">
<button class="btn btn-purple pull-right" [disabled]="!form.controls['legalName'].valid" (click)="onLegalNameSave()">{{'STRUCTURES_AND_BRANCHES.branch.save_btn' | translate}}</button>
<button class="btn btn-light-gray margin_right__5 pull-right" (click)="onCancelLegalName()">{{'STRUCTURES_AND_BRANCHES.branch.cancel_btn' | translate}}</button>
</div>
</div>
</div>
</div>
</form>
解决方案
尝试使用这个。
[hidden]="model.id == 0"
*ngIf if false 将从 DOM 中删除元素
[hidden] 如果为 true 将在 css 中将显示设置为无
推荐阅读
- c# - 多线程环境中的最佳实践 EventWaitHandle.Dispose()
- asp.net-web-api2 - platform.js:78 Uncaught TypeError:没有'new'就不能调用类构造函数平台
- django - DJANGO 如何制作过滤器以显示模型中的所有对象?
- git - Git忽略整个文件夹,子文件夹除外?
- python - ValueError:无法将大小为 3509 的序列复制到维度为 6 的数组轴
- r - 使用行中两侧的平均值估算 na
- postgresql - Spring boot entitymanager更新查询postgress获取结果
- html - HTML 表单验证确保输入字段中的最后 2 个字符是字母
- flutter - 无法在 Scaffold 小部件后面堆叠图像
- c - 我如何在 caesar cs50 中加密用户的输入?