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

113

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를 나머지 API로 전달할 수 있기를 원한다는 것입니다. 비활성화 된 항목이 포함되어 있지 않으면 분명히 불가능합니다.

여기에 뭔가 누락되었거나 예상되는 동작입니까? Angular에게 form.value에 비활성화 된 항목을 포함하도록 지시하는 방법이 있습니까?

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

angular angular2-forms

— 짐 컬버 웰
소스

246

당신이 사용할 수있는:

this.notelinkingForm.getRawValue()

에서 문서 :

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

— Sasxa
소스

41

지구에 각 팀이 이런 짓을 왜 원더

— inorganik

@inorganik 비활성화 된 컨트롤을 활성화하고 그 값을 편집 할 수 있기 때문에 그렇게했습니다. 이 경우 getRawValue ()는 변조 된 값을 가진 객체를 반환합니다.

— 덴마크어 '

1

이것은 실제로 좋은 것입니다. 예를 들어 비활성화 된 컨트롤의 값이 변경되지 않을 것임을 알고 있으므로 해당 컨트롤에 처음에 데이터베이스의 값을 할당했기 때문에 저장 API에 포함하고 싶지 않습니다. 그러나 어떤 경우에는 실제로 프런트 엔드에서 할당 된 값이 있고 DB에 저장되지 않는 컨트롤을 포함하고 싶을 때이 기능이이를 다룹니다. 항상 두 가지 옵션을 모두 갖는 것이 좋습니다.

— ChiragMS

사실 @ChiragMS입니다. 나는만큼 그 모습처럼 나는 사이에 선택의 여지가로 readonly와 disabled. 그러나 이것은 아래 답변에서 설명한 것처럼 확인란 및 라디오 버튼의 경우가 아닙니다. 그런 경우에는 데이터를 다르게 가져 와서 해당 사례에 맞게 코드를 작성해야한다는 점이 마음에 들지 않았습니다.

— Sandro

10

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

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

— 루이스 리카르도 카예 타노 에레라
소스

7

내가 필요한 것을 80 % 얻 도록 해주신 @Sasxa 에게 감사드립니다 .

같은 문제에 대한 해결책을 찾고 있지만 중첩 된 양식의 경우 평소를 변경하여 해결할 수있었습니다.

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

에

this.notelinkingForm.getRawValue().nestedForm

— Eper
소스

0

readonly대신 사용 disabled하는 경우 데이터가 양식에 포함되는 동안 여전히 편집 할 수 없습니다. 그러나 모든 경우에 가능하지는 않습니다. 예를 들어 라디오 버튼과 확인란에는 사용할 수 없습니다. MDN 웹 문서를 참조하십시오 . 이 경우 여기에 제공된 다른 솔루션을 신청해야합니다.

— 산드로
소스