Angular 2 비활성화 컨트롤은 form.value에 포함되지 않습니다.

Angular 2 비활성화 컨트롤은 form.value에 포함되지 않습니다.

Angular 2 반응형에서 컨트롤을 비활성화하면 컨트롤이 form.value에 포함되지 않습니다.예를 들어, 아래와 같이 양식을 정의하면 다음과 같습니다.

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

그리고 this.notelinkingForm.value를 확인합니다. 모든 컨트롤이 활성화된 경우 출력은 다음과 같습니다.

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"} 

그러나 일부 컨트롤이 비활성화되면 다음과 같습니다.

{"Enabled":true} 

비활성화된 컨트롤이 제외되는 방법에 주목합니다.

제 의도는 폼이 변경되면 모든 속성이 포함된 form.value를 Rest API로 전달할 수 있도록 하는 것입니다.장애인 항목이 포함되어 있지 않으면 분명히 이것은 불가능합니다.

제가 뭔가를 놓쳤나요, 아니면 이게 예상되는 행동인가요?Angular에게 비활성화된 항목을 form.value에 포함하도록 지시할 수 있는 방법이 있습니까?

당신의 생각을 환영합니다.

사용할 수 있는 항목:

this.notelinkingForm.getRawValue()

Angular 문서에서:

비활성화된 상태에 관계없이 모든 값을 포함하려면 이 방법을 사용합니다.그렇지 않으면,value속성은 그룹의 값을 가져오는 가장 좋은 방법입니다.

제가 사용하는 다른 옵션은 다음과 같습니다.

this.form.controls['LinkToPreceeding'].value;

@Sasxa에서 필요한 것의 80%를 구해주셔서 감사합니다.

동일한 문제에 대한 해결책을 찾고 있지만 중첩된 양식에 대해서는 평소와 다름없이 변경하여 해결할 수 있었습니다.

this.notelinkingForm.get('nestedForm').value

로.

this.notelinkingForm.getRawValue().nestedForm

사용하는 경우readonly대신에disabled데이터가 양식에 포함되는 동안에는 편집할 수 없습니다.하지만 그것이 모든 경우에 가능한 것은 아닙니다.예: 라디오 단추 및 확인란에는 사용할 수 없습니다.MDN 웹 문서를 참조하십시오.이러한 경우에는 여기에 제공된 다른 솔루션을 신청해야 합니다.

비활성화된 폼 값을 얻을 수 있는 두 가지 방법이 있습니다.첫번째

 onSubmit(){
 for (const prop in this.formControl.controls) {
      this.formControl.value[prop] = this.formControl.controls[prop].value;
    }
}

두 번째 방법 Submit 이벤트에서 형식을 활성화할 수 있습니다.

 onSubmit(){
     this.formControl.enable() 
   //Your logical/operational statement goes here

  //at last if you wish you can again disable your form like this
   this.formControl.disable();
}

언급URL : https://stackoverflow.com/questions/40148102/angular-2-disabled-controls-do-not-get-included-in-the-form-value