以 Angular 2 反应形式禁用文本输入

Question

我有一个 Angular 2 的响应式表单，可以通过添加按钮调用新表单或通过编辑按钮更新现有详细信息。如果用户选择编辑按钮，则应禁用电子邮件输入。我有下面的代码，但只要用户选择编辑，输入就不会被禁用。如果我在 addForm 方法中将 disabled 设置为 true 并选择编辑按钮，则电子邮件输入被禁用

    public addForm(event: string) : FormGroup {

            this.userForm = this.fb.group({
                firstName: ['',
                    [   Validators.required,
                        Validators.maxLength(ManageUsersConstants.maxLengthName)
                    ]],
                lastName: ['',
                    [   Validators.required,
                        Validators.maxLength(ManageUsersConstants.maxLengthName)]
                    ],
                email: [{value: '', disabled : false}],
                }),
            });
        }
  

    public editForm(event: string, editValues : any) : FormGroup {
        this.userForm = this.fb.group({
            firstName: [editValues.firstName, [
                Validators.required,
                Validators.maxLength(ManageUsersConstants.maxLengthName)]],
            lastName: [editValues.lastName,
                [   Validators.required,
                    Validators.maxLength(ManageUsersConstants.maxLengthName)]],
            email: [{value: editValues.email, disabled: true}],
        });

    }

Answer 1

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

Component.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>

Stackblitz demo