禁用 angular 2 反应形式的文本输入

Question

我在 angular 2 中有一个反应式表单，可以通过新表单的添加按钮或更新现有详细信息的编辑按钮来调用它。如果用户 select 编辑按钮，电子邮件输入应该被禁用。我有下面的代码，但每当用户 selects 编辑时，输入都不会被禁用。如果我在 addForm 方法和 select 编辑按钮中将 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

禁用 angular 2 反应形式的文本输入

Disable a text input in an angular 2 reactive form

angular2-forms

angular

angular-reactive-forms