Отключить ввод текста в угловой 2 реактивной форме - PullRequest
Новая
       40

Отключить ввод текста в угловой 2 реактивной форме

0 голосов
/ 31 мая 2018

У меня есть реактивная форма в angular 2, которую можно вызвать через кнопку добавления новой формы или кнопку редактирования, чтобы обновить существующие детали.Если пользователь выбирает кнопку редактирования, ввод электронной почты должен быть отключен.У меня есть код ниже, но всякий раз, когда пользователь выбирает редактирование, ввод не отключается.Если в методе addForm я установил значение «отключено» и выберите кнопку «Редактировать», то ввод электронной почты будет отключен 

    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}],
        });

    }

1 Ответ

0 голосов
/ 31 мая 2018

В событие редактирования добавьте следующий код 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

...