프로그래밍 방식으로 'value Changes'를 실행하는 방법은 무엇입니까?

프로그래밍 방식으로 'value Changes'를 실행하는 방법은 무엇입니까?

내 페이지 중 하나에서 나는 사용합니다.FormBuilder초기화 시 양식을 채우십시오.모든 입력은 입력이 비어 있지 않을 때마다 클래스를 가져옵니다.이 작업은 다음을 추가하여 수행됩니다.ngClass모든 입력에 대해, 그리고 구독.FormGroup의valueChanges.

양식이 프로그래밍 방식으로 채워질 때마다 문제가 발생합니다.사용자가 양식의 값을 변경할 때마다valueChanges호출되지만, 사용할 경우에는 그렇지 않습니다.FormBuilder.

제 질문은:다음을 수행하는 방법valueChanges언제든지 발사되는 이벤트FormBuilder완료되었습니다.

사용해 보았습니다.this.FormGroup.updateValueAndValidity()하지만 이것은 아무 결과도 얻지 못했습니다.

저는 저에게 맞는 해결책을 찾았습니다.두 개의 매개 변수를 잊어버렸습니다.updateValueAndValidity기능.

• 본인만: 이 항목만 업데이트합니다.FormControl사실이라면
• emitEvent: 원인이 됩니다.valueChangestrue일 때 실행되는 이벤트입니다.

따라서 다음과 같은 결과를 얻을 수 있습니다.FormGroup.updateValueAndValidity({ onlySelf: false, emitEvent: true });

당신의 질문이 100% 명확하지는 않지만, 저는 당신이 말하고 있는 것이 무엇인지 생각합니다.

My valueChanges는 UI에서 무언가를 변경할 때 정상적으로 작동하지만 초기 조건을 처리하기 위해 생성자에서 FormBuilder 개체 초기화를 완료하는 즉시 구독 함수 로직을 트리거하고 싶습니다.

그런 경우에 제가 하는 일은 매우 간단합니다.

    this.searchForm.valueChanges
        .pipe(startWith(initialValues)).subscribe(value =>
        {
            // whatever you want to do here
        });

initialValues양식을 초기화한 원시 데이터입니다.아마도 당신은 그냥 집어넣을 수 있을 것입니다.searchForm.getRawValue()너무.

이것은 관측 가능한 것이 즉시 발사되도록 합니다.

---

중요:명시적인 대신 비동기 파이프를 사용하여 구독하는 경우 원본 답변에 미묘한 문제가 있습니다.subscribe().

Angular(각도)에서는 위와 같이 관찰 가능한 항목에 명시적으로 가입할 수 있지만 비동기 파이프를 사용하는 것도 마찬가지입니다.예는 다음과 같습니다.

model = {
   firstName: this.searchForm.valueChanges.pipe(startWith(initialValues), map(values => values.firstName.toUpperCase())
};

그런 다음 템플릿에 양식 값을 표시합니다.

First name: {{ model.firstName | async | json }}

이 접근법에는 상당히 미묘한 문제가 있습니다.

• 그startWith연산자는 관찰 가능한 값을 만들 때 값을 캡처하며, 이 값은 처음에 정확합니다.
• 그러나 관찰 가능한 항목을 다시 구독하는 경우 양식이 변경된 경우에도 원래 값을 계속 사용합니다.UI를 숨겼다가 다시 표시하면 이 문제가 발생할 수 있습니다(새 가입이 발생함).

가능한 해결책:

1. 사용하다defer의 가치가 있을 정도로this.searchForm.value관찰 가능한 항목을 구독할 때마다 평가됩니다.

   defer(() => this.searchForm.valueChanges.pipe(startWith(this.searchForm.value), 
               map(values => values.firstName.toUpperCase())
   

2. 사용하다shareReplay이 기능은 여기에서만 작동합니다.refCount: false청소가 제대로 되지 않아 추천하지 않습니다.

   this.searchForm.valueChanges.pipe(startWith(initialValues), 
                map(values => values.firstName.toUpperCase(), 
                shareReplay({ refCount: false, bufferSize: 1 })
   

3. 상가: IfstartWith람다가 있으면 그걸 사용할 수 있습니다.안타깝게도 지금은 그렇지 않습니다.

   startWith(() => this.searchForm.value)
   

을: 을 사용합니다.subscribe분명히 그러면 이 문제에 대해 걱정할 필요가 없습니다.

질문의 제목과 설명이 약간 오해의 소지가 있습니다.어느 쪽입니까? (i)

• 필드 값을 프로그래밍 방식으로 변경할 때 필드의 유효성 상태를 업데이트하시겠습니까?
• 아니면 당신의 구독을 확인하시겠습니까?valueChanges필드의 값을 프로그래밍 방식으로 변경할 때 호출됩니까?

어쨌든, 이 플런크르를 확인해 보세요: https://plnkr.co/edit/4V4PUFI1D15ZDWBfm2hb?p=preview

다음과 같이 필드 값을 프로그래밍 방식으로 설정하면 다음과 같은 결과가 나타납니다.

this.myForm.get('myField').setValue(newValue);

필드의 유효성과 관찰 가능한 값이 모두 업데이트됩니다.이미 존재하는 행동을 재현하려는 것처럼 보입니다.

하만지그, 그.dirty필드의 속성은 프로그래밍 방식으로 값을 변경할 때 업데이트되지 않습니다("사용자가 UI에서 값을 변경한 경우 컨트롤이 더럽습니다" 참조).당신이 확인하고 있는 것이 아닐까요?dirty필드 오류를 표시하고 유효성 상태가 업데이트되지 않은 것처럼 착각하는 속성, 사실은 단지dirty업데이트되지 않은 속성?

이 두 가지는 다릅니다.당신은 면안됩니다에 는 안 .valueChanges수동으로 유효성 검사를 트리거합니다.유효성 검사는 양식 모델에 유효성 검사자를 선언하여 시행해야 합니다.

양식의 값을 재설정하고 프로그래밍 방식으로 변경을 트리거하는 데 사용합니다.

this.MyForm.controls["MyField"].patchValue(MyField);

변경 내용 구독:

this.MyForm.get("MyField").valueChanges.subscribe(val => {
    if (val) {
        const MyField = this.MyForm.get("MyField");
    }
});

언급URL : https://stackoverflow.com/questions/42435736/how-to-fire-the-valuechanges-programmatically