Включение / отключение поля реактивных форм Angular 2

Вы можете использовать свойства Angular FormContol, например

• грязный
• коснулся
• нетронутый
• ошибки

сделать это.

Что вам нужно сделать, так это проверить статус formControl и отключить поля или кнопки в зависимости от ваших требований.

Initially verify button should be disable. It should be enabled , only when email field is entered.

Вы можете просто привязать disabled с действительным статусом поля email. Обратите внимание, что когда состояние входа отключено, это не будет valid или invalid.

<button type = "button" [disabled] = "personalDtlsForm.get('inputValue').invalid">Verify</button>

Second issue is I want to have only one field enabled at time. If user starts typing in email, then phone number should be disabled and vice versa.

Чтобы отключить все другие элементы управления формы в форме, сначала нам нужно получить доступ ко всем из них, мы можем сделать это через formGroupDirective.directives.
Я создал специальную директиву для достижения того, чего вы хотите.

@Directive({
  selector: '[disableAllOthers]'
})
export class DisableAllOthers {
  constructor(
    private elem: ElementRef, 
    private control: NgControl,
    private renderer: Renderer2
  ) {
    this.elem.nativeElement.addEventListener('mouseover', () => {
      (this.control as FormControlName).formDirective.directives.forEach(elem => {
        if (elem === this.control) {
          elem.control.enable();
        } else {
          elem.control.disable();
        }
      });
    });
  }
}

Для click / focus событие не сработает, когда вход отключен, здесь я изменил disable/enable через событие наведите указатель мыши на, см. демонстрация.

Вы можете включить / отключить управление с помощью:

this.personalDtlsForm.controls['phoneNo'].enable()

this.personalDtlsForm.controls['phoneNo'].disable()

Итак, чтобы отключить поле, вы должны подписаться на valueChanges другого поля и отключить другое поле, если это value !== '' или что-то в этом роде.

Пример:

this.personalDtlsForm.controls['phoneNo'].valueChanges.subscribe(
    value => {
        if (value !== ''){
            this.personalDtlsForm.controls['inputValue'].disable();
        } else {
            this.personalDtlsForm.controls['inputValue'].enable();
        }
    }
);

И конечно такая же подписка на inputValue formControl

Что касается вашего второго вопроса, вы можете установить переменную isFormValid в операторе if, когда value !== '', что означает, что введен хотя бы один из них.

Окончательная проверка включения кнопки может быть примерно такой:

isFormValid && personalDtlsForm.valid

Если вы используете подход с реактивной формой для получения входных данных от пользователя, а затем вы хотите включить или отключить поля в зависимости от действий пользователя. Итак, вы можете сделать следующее ...

Предположим, ваша FormGroup выглядит так ->

// cityRef field will be automatically disabled intially, as property disabled: true is set

this.signUpFrom = new FormGroup({
      userData: new FormGroup({
        mobileNumber: new FormControl(null, [Validators.required, Validators.minLength(10), Validators.maxLength(10)]),
        password: new FormControl(null, [Validators.required]),
        userType: new FormControl('VENDOR')
      }),
      otherData: new FormGroup({
        cityRef: new FormControl({ value: null, disabled: true }, [Validators.required]),
        email: new FormControl(null, [Validators.required, Validators.email]),
        address: new FormControl(null, [Validators.required])
      }),
      name: new FormControl(null, [Validators.required]),
    });

Теперь, если вы хотите отключить / включить электронную почту, пароль, имя и т. д. В зависимости от действий пользователя. Вы можете сделать это всего за один шаг. (Пример доступа к разным полям)

this.signUpFrom.get('otherData.email').enable(); // To enable
this.signUpFrom.get('otherData.email').disable(); // To disable

this.signUpFrom.get('userData.password').enable(); // To enable
this.signUpFrom.get('userData.password').disable(); // To disable

this.signUpFrom.get('name').enable(); // To enable name field
this.signUpFrom.get('name').disable(); // To disable name field

Вы можете поместить эти коды в функцию, которая может быть вызвана в onClick или onChanges и т. д.

Даже вы можете получить текущую ситуацию с полями, когда она отключена или включена, используя

this.signUpFrom.get('name').disabled; // return true if disabled
this.signUpFrom.get('name').enabled; // return true if enabled

Возможно, я опаздываю с ответом на этот вопрос, но, поскольку я нашел полезным, я решил ответить на него, так как это может быть полезно для вас или кого-то еще!