Angular 禁用角度2被动形式的文本输入

Angular 禁用角度2被动形式的文本输入,angular,angular2-forms,angular-reactive-forms,Angular,Angular2 Forms,Angular Reactive Forms,我在angular 2中有一个被动表单,它可以通过一个新表单的添加按钮或一个编辑按钮来更新现有的详细信息。如果用户选择编辑按钮,则应禁用电子邮件输入。我有下面的代码,但每当用户选择编辑时,输入不会被禁用。如果我在addForm方法中将disabled设置为true并选择edit按钮,那么电子邮件输入将被禁用 public addForm(事件:string):FormGroup{ this.userForm=this.fb.group({ 名字:['', [验证器。必需, Validators

我在angular 2中有一个被动表单,它可以通过一个新表单的添加按钮或一个编辑按钮来更新现有的详细信息。如果用户选择编辑按钮,则应禁用电子邮件输入。我有下面的代码,但每当用户选择编辑时,输入不会被禁用。如果我在addForm方法中将disabled设置为true并选择edit按钮,那么电子邮件输入将被禁用

public addForm(事件:string):FormGroup{
this.userForm=this.fb.group({
名字:['',
[验证器。必需,
Validators.maxLength(ManageUsersConstants.maxLengthName)
]],
姓氏:['',
[验证器。必需,
Validators.maxLength(ManageUsersConstants.maxLengthName)]
],
电子邮件:[{value:'',已禁用:false}],
}),
});
}
公共editForm(事件:字符串,EditValue:任意):FormGroup{
this.userForm=this.fb.group({
firstName:[editValues.firstName[
需要验证器,
Validators.maxLength(ManageUsersConstants.maxLengthName)],
lastName:[editValues.lastName,
[验证器。必需,
Validators.maxLength(ManageUsersConstants.maxLengthName)],
电子邮件:[{value:editValues.email,已禁用:true}],
});

}
在编辑事件中添加以下代码
this.formGroup.controls['email'].disable()

组件。ts

 ngOnInit() {
    this.formGroup = this.formBuilder.group({
      email: [{value: '', disabled : false}]      
    });  
  }  

  onEdit(){    
    this.formGroup.controls['email'].disable()   
  }
HTML

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #form>
    <div>
      <label for="dateone">Email: </label>
      <input formControlName="email" #email/>          
      <button type="button" (click)="onEdit()">edit</button>  
      </div>
</form>

电邮:
编辑

在编辑事件中添加以下代码
this.formGroup.controls['email'].disable()

组件。ts

 ngOnInit() {
    this.formGroup = this.formBuilder.group({
      email: [{value: '', disabled : false}]      
    });  
  }  

  onEdit(){    
    this.formGroup.controls['email'].disable()   
  }
HTML

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" #form>
    <div>
      <label for="dateone">Email: </label>
      <input formControlName="email" #email/>          
      <button type="button" (click)="onEdit()">edit</button>  
      </div>
</form>

电邮:
编辑

看起来您只是在重新分配表单。为什么不直接针对输入并改变它呢
this.userForm.get('email').disable()(我想,我一点也没碰过一个对不起,你是说直接针对输入?html?我是说针对来自FormGroup的电子邮件(就像我上次评论中的代码位)我试过了,还设置了/patch,但它似乎仍然设置为false。看起来您只是在重新分配表单。为什么不直接针对输入并更改它呢?
this.userForm.get('email').disable();
(我想,我一点也没碰过一个。对不起,你是说直接针对输入?html?我是说针对来自FormGroup的电子邮件(就像我上次评论中的代码位)我试过了,还设置了/patch,但它似乎仍然将其设置为falseQuick question,我将该行代码添加到edit中,并且它可以工作,但是每当我再次单击add时,输入都被禁用。我在-this.userForm.controls['email'].enable()中添加了这行代码;-创建表单后,表单仍处于禁用状态。如果在创建表单之前将其添加进来,我会得到一个未定义的结果。使其正常工作,只是添加了一个检查以确保其未被定义,并在创建表单之前将其移到。快速问题,我将该行代码添加到编辑中,它正常工作,但每当我再次单击“添加”时,输入将被删除已启用。我在-this.userForm.controls['email'].enable();-表单创建后添加了这行代码,但它仍然处于禁用状态。如果在创建表单之前添加它,我会得到一个未定义的代码。使其正常工作,只需添加一个检查以确保它未定义,并在创建表单之前将其移动到