Angular 一个用于编辑和添加带有被动表单的页面的视图

我想使用一个角度组件来编辑和显示客户的详细信息（用作示例）

通常情况下，我会实现一个反应式表单（包含15个控件）并禁用所有控件，这些控件不应编辑，如下所示：

form = this.formBuilder.group({
  name: [""],
  birthday: [{value:"", disabled: true}],
...
)};

问题是：如果我想使用视图及其表单来显示客户的详细信息，那么输入字段也会显示为禁用的外观/样式

为了防止出现这种情况，我正在考虑从FromControls中删除禁用的标记，并在组件的HTML中实现以下逻辑：

<input matInput formControlName="birthday" readonly [ngClass]="{'disabled-look': this.isEditMode === true}">

// css
.disabled-look{
color: gray;
}

//css
.残疾人士的容貌{
颜色：灰色；
}

现在输入字段总是只读的。 如果视图处于编辑模式，则输入字段将获得一种样式，使ist看起来不可编辑。 如果视图未处于编辑模式，则输入字段为只读，但不显示为禁用状态，这正是我想要实现的

使用这种方法有什么问题吗？有更聪明的方法吗

提前谢谢！：D

编辑： 另一种基于@Gonzalo的isEditMode的方法是

---

然后再次将禁用的标记添加回FormControl

您可以基于

isEditMode

使用不同的输入

<input *ngIf="this.isEditMode" matInput formControlName="birthday" disabled>
<input *ngIf="!this.isEditMode" matInput formControlName="birthday" readonly>

尝试使用：

<input type="text" [readonly]="!isEditMode" [disabled]="isEditMode">

---

谢谢你的回答，我也想到了这个。但是在表单的html中使用disabled会导致以下警告：

看起来您正在将disabled属性与被动表单指令一起使用[…]我们建议使用此方法以避免“选中后更改”错误。示例：form=newformgroup（{first:newformcontrol（{value:'Nancy'，disabled:true}，Validators.required），last:newformcontrol（'Drew'，Validators.required）}）