각도 2: 값이 변경된 후 FormControl 검증기 업데이트

각도 2: 값이 변경된 후 FormControl 검증기 업데이트

업데이트 할 수 있는 방법이 있는가?ValidtorsFormControl 객체에 대한 정보를 제공하시겠습니까?있습니다FormGroup여기서 하나의 입력이 선택 필드인 경우, 선택 필드의 값이 변경되면 내 FormGroup의 다른 FormControl이 검증자를 변경하도록 하십시오.

여기 내 것이 있다.subscribeToFormChanges()내 FormGroup 구성 요소의 메서드:

private appIdRegexes = {
    ios: /^[a-zA-Z][a-zA-Z0-9]*(\.[a-zA-Z0-9\-]+){2,}$/,
    android: /^([a-zA-Z])[a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9\-]*){2,}$/,
    any: /^any$/
  };

private subscribeToFormChanges(): void {
    const myFormValueChanges$ = this.appsForm.valueChanges;
    myFormValueChanges$.subscribe(x => {
      const platform = this.appsForm.controls['platform'].value;
      const appId = this.appsForm.controls['appId'].value;

      if (this.appIdRegexes[platform]) {
        this.appsForm.controls['appId'] = new FormControl(appId, Validators.pattern(this.appIdRegexes[platform].source));
      }
    });
  }

여기에 html 템플릿이 있다.

<div class="row" [formGroup]="appsForm">
  <div class="form-group col-xs-6">
    <label>Platform</label>

    <select id="licensePlatform" class="form-control"
            formControlName="platform">
      <option *ngFor="let platform of licensePlatforms" [value]="platform">
        {{platform}}
      </option>
    </select>

    <small [hidden]="appsForm.controls.platform.valid">
      Platform is required
    </small>
  </div>

  <div class="form-goup col-xs-6">
    <label>App ID</label>
    <input type="text" class="form-control" formControlName="appId">
    <small [hidden]="appsForm.controls.appId.valid">
      Please use the right ID format
    </small>
  </div>
</div>

I've 구현 시subscribeToFormChanges()여기 보이는 것과 같은 방법,appsForm.controls.appId.value입력 필드에 쓸 때 더 이상 업데이트되지 않음.처음에는 값이 업데이트되고 있다.

듣고 문제를 해결했다.valueChanges내 플랫폼에서 필드 선택 후setValidators()appId 입력 필드의 메서드.이 글은 상당히 도움이 되었다.

내 해결책은 다음과 같다.

 private subscribePlatformChanges() {
    const platformCtrl = this.appsForm.controls['platform'];
    const changes$ = platformCtrl.valueChanges;

    changes$.subscribe(platform => {
      this.appsForm.controls['appId'].setValidators([Validators.pattern(this.appIdRegexes[platform].source),
                                                    Validators.required]);
      this.appsForm.controls['appId'].updateValueAndValidity();
    });
  }

컨트롤을 재점검하려면FormGroup, 당신은 의 것으로 무언가를 할 수 있다.FormControl.

만약this.appsForm참으로FormGroup:

this.appsForm.controls.forEach(control => control.updateValueAndValidity());

아래와 같이 선택 항목에서 변경 이벤트를 실행할 수 있다.

<select id="licensePlatform" class="form-control"
            formControlName="platform"  (change)="update($event.target.value)" >
      <option selected="selected" disabled="disabled" value="">Select Card Type</option>
      <option *ngFor="let platform of licensePlatforms" [value]="platform" >
        {{platform}}
      </option>
    </select>

그리고 구성요소에 아래와 같이 업데이트 기능을 작성할 수 있다.

update(value){
      if(value){
        (<FormControl>this.appsForm.controls['platform']).setValue(value, {onlySelf: false});
        const appId = this.appsForm.controls['appId'].value;
        if (this.appIdRegexes[value]) {
        this.appsForm.controls['appId'] = new FormControl(appId, Validators.pattern(this.appIdRegexes[value].source));
      }
    };

  }

이렇게 하면 드롭다운에서 선택한 내용에 따라 검증자가 업데이트된다.나는 이것이 너의 문제를 해결할 것이라고 믿는다.

참조URL: https://stackoverflow.com/questions/39897975/angular-2-update-formcontrol-validator-after-valuechanges