Как изменить HTML-элемент readonly и требуемый атрибут в Angular2 Typescript?

Ответ 1

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

 [required]="isRequired ? '' : null"

или

 [required]="isRequired ? 'required' : null"

Ваш Plunker выдает ошибку из-за отсутствия [] вокруг ngControl.

См. также Plunker для рабочего примера

См. также комментарии Дейлана ниже.

Ответ 2

Кажется, у вас уже есть ответ для добавления/удаления атрибута readonly. Для требуемого атрибута я предлагаю создать службу, чтобы отслеживать состояние включенного/отключенного валидатора, а затем использовать службу при привязке к вашим элементам проверки.

Проверка состояния

Этот класс отвечает за отслеживание валидатора и его состояние включения/отключения.

export class StateValidator {
    public enabled: boolean = true;
    validator: (control: Control) => { [key: string]: boolean };
    constructor(validator: (control: Control) => 
        { [key: string]: boolean }, enabled: boolean) {
        this.enabled = enabled;
        this.validator = validator;

    }

    enable() {
        this.enabled = true;
    }
    disable() {
        this.enabled = false;
    }
    toggle() {
        this.enabled = !this.enabled;
    }
    get() {
        return (control: Control) => {
            if (this.enabled)
                return this.validator(control);
            return null;
        }
    }
}

Он имеет методы для включения, отключения или переключения проверки подлинности; а также метод get, который возвращает новую функцию валидатора, которая при вызове вызовет базовую функцию валидатора, если валидатор включен или возвращает значение null, когда валидатор не включен.

Служба валидации

Этот класс является однопользовательской службой, ответственной за регистрацию валидаторов по ключу и поддерживающих методы для включения, отключения или переключения проверки на основе этого ключа.

export class ValidationService {
    validators: { [key: string]: StateValidator } = {};
    register(key: string, validator: Function): Function {
        var stateValidator = new StateValidator(<(control: Control) => { [key: string]: boolean }>validator, true);
        this.validators[key] = stateValidator;
        return stateValidator.get();
    }
    enable(key: string) {
        this.validators[key].enable();
    }
    disable(key: string) {
        this.validators[key].disable();
    }
    toggle(key: string) {
        this.validators[key].toggle();
    }
    list() {
        var l = [];
        for (var key in this.validators) {
            if (this.validators.hasOwnProperty(key)) {
                l.push({ key: key, value: this.validators[key].enabled });
            }
        }
        return l;
    }
}

У службы также есть функция list для возврата списка пар ключ/значение, где ключ представляет зарегистрированный ключ проверки, а значение является логическим индикатором, который представляет состояние включенного проверки.

Компонент

Чтобы использовать ValidationService, зарегистрируйте службу с инжектором корня во время начальной загрузки:

bootstrap(AppComponent, [ValidationService]);

Или зарегистрируйте службу с помощью инжектора на уровне компонента:

@Component({
  selector: 'app',
  providers: [ValidationService],
  ...
})

Затем введите службу в свой конструктор компонента:

export class AppComponent {
    form: ControlGroup;
    constructor(public validationService:ValidationService) {
      ...
    }
}

Затем привяжите к элементам проверки, как обычно, за исключением использования ValidationService для регистрации и возврата проверки состояния:

new Control('', validationService.register('required', Validators.required));

Одна из замечательных особенностей этого решения заключается в том, что вы можете легко создавать и смешивать проверки состояния с другими встроенными или настраиваемыми валидаторами:

this.form = new ControlGroup({
    name: new Control('hello',
        Validators.compose([
            validationService.register('required', Validators.required),
            validationService.register('minlength', Validators.minLength(4)),
            Validators.maxLength(10)]))

});

Переключение валидатора

Используйте службу для переключения состояния проверки:

validationService.toggle('required');

Вот пример того, как привязываться к списку валидаторов состояния в таблице и подключать функцию переключения к событию с нажатием кнопки:

<table>
  <tr>
     <td>Validator</td>
     <td>Is Enabled?</td>
     <td></td>
  </tr>
  <tr *ngFor="#v of validationService.list()">
     <td>{{v.key}}</td>
     <td>{{v.value }}</td>
     <td><button (click)="validationService.toggle(v.key)">Toggle</button></td>
  </tr>
</table>

Демо Plnkr

Ответ 3

Альтернативное решение, которое я использую:

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
    selector: '[symToggleRequired]'
})
export class ToggleRequiredDirective {
    @Input() public set symToggleRequired(condition: boolean) {
        if (condition) {
            (<HTMLElement>this.element.nativeElement).setAttribute('required', 'true');
        } else {
            (<HTMLElement>this.element.nativeElement).removeAttribute("required");
        }
    } 

    constructor(
        private element: ElementRef
    ) { } 
}

Используйте эту директиву для элемента html для удаления или добавления требуемого атрибута:

<input [symToggleRequired]='FlagPropertyOfYourComponent'>