Angular2 Types 스크립트에서 HTML 요소 읽기 전용 및 필수 속성을 변경하는 방법은 무엇입니까?

Angular2 Types 스크립트에서 HTML 요소 읽기 전용 및 필수 속성을 변경하는 방법은 무엇입니까?

일부 구성 요소의 경우 입력 필드 읽기 전용 및 필수 특성을 앞뒤로 변경하고 싶습니다.

요청 시 두 가지를 모두 변경하는 실행 코드를 얻을 수 있었지만, 문제는 읽기 전용으로 작동하지만 필수로 작동하지 않는다는 것입니다. 필수 Angular2로 요소 속성이 변경되어도 필드Ctrl은 여전히 유효하다고 생각합니다.

여기 제가 이 문제를 설명한 플런커가 있습니다. https://plnkr.co/edit/Yq2RDzUJjLPgReIgSBAO?p=preview

//our root app component
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <form #f="ngForm">
      <button type="button" (click)="toggleReadOnly()">Change readonly!</button>
      <button type="button" (click)="toggleRequired()">Change required!</button>
      <input id="field" [(ngModel)]="field" ngControl="fieldCtrl" #fieldCtrl="ngForm"/>
      {{fieldCtrl.valid}}
    </form>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }

  toggleRequired(){
    this.isRequired = !this.isRequired;
    var fieldElement = <HTMLInputElement>document.getElementById('field');
    if (this.isRequired){
      fieldElement.required = true;
      this.field = "it's required now";
    }
    else{
      fieldElement.required = false;
      this.field = "can leave it blank";
    }
  }

  toggleReadOnly(){
    this.isReadOnly = !this.isReadOnly;
    var fieldElement = <HTMLInputElement>document.getElementById('field');
    if (this.isReadOnly){
      fieldElement.readOnly = true;
      this.field = "it's readonly now";
    }
    else{
      fieldElement.readOnly = false;
      this.field = "feel free to edit";
    }
  }

  private isReadOnly:boolean=false;

  private field:string = "feel free to edit";

  private isRequired:boolean=false;

}

업데이트: 제안된 방법을 시도했습니다.

[required]="isRequired" [readonly]="isReadOnly"

또한 읽기 전용 및 required=true에 대한 매력처럼 작동하지만 더 이상 필요한 속성을 끌 수 없습니다. 빈 필드가 더 이상 필요하지 않지만 유효하지 않다는 것을 나타냅니다.

업데이트된 플런커: https://plnkr.co/edit/6LvMqFzXHaLlV8fHbdOE

업데이트 2:제안된 방법 시도

[required]="isRequired ? true : null"

요청에 따라 요소에서 필수 특성을 추가/제거하지만 필드 컨트롤러의 유효한 속성은 필수가 아닌 빈 필드에 대해 false로 표시됩니다.

Angular2 Types 스크립트에서 필요한 속성을 변경하는 올바른 방법은 무엇입니까?

바인딩된 특성을 제거하려면 null로 설정해야 합니다.거짓으로 제거하는 것으로 변경하자는 논의가 있었지만, 적어도 현재로서는 거절되었습니다.

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

또는

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

플런커가 누락으로 인해 오류를 발생시킵니다.[]주위에ngControl.

작업 예제는 이 플런커를 참조하십시오.

아래 Deilan의 의견도 참조하십시오.

읽기 전용 특성을 추가/제거할 수 있는 응답이 이미 있는 것 같습니다.필요한 특성의 경우 검증자의 활성화/비활성화 상태를 추적하고 검증 컨트롤에 바인딩할 때 서비스를 활용할 수 있는 서비스를 만드는 것이 좋습니다.

상태 확인기

이 클래스는 유효/비활성화된 상태와 유효/비활성화된 상태를 추적하는 역할을 합니다.

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

내가 사용하는 대체 솔루션:

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'>

언급URL : https://stackoverflow.com/questions/35212475/how-to-change-html-element-readonly-and-required-attribute-in-angular2-typescrip