首页 文章

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

提问于
浏览 次
0

我在角度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}],
        });

    }
angular angular2-forms angular-reactive-forms

1 回答

  • 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

    回复于

相关问题