FormBuilder 컨트롤의 값을 수동으로 설정

이것은 나를 미치게 만들고 있습니다. 나는 총을 받고 있으며 하루 종일 이것에 대해 여유를 가질 수 없습니다.

구성 요소 내에서 수동으로 제어 값 ( 'dept')을 설정하려고하는데 작동하지 않습니다. 새로운 값조차도 콘솔에 올바르게 기록됩니다.

FormBuilder 인스턴스는 다음과 같습니다.

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

선택한 부서를 수신하는 이벤트 핸들러입니다.

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

이제 양식을 제출하고 로그 아웃 this.form하면 필드가 여전히 비어 있습니다! 다른 ppl 사용을 updateValue()보았지만 이것은 베타 1이며 컨트롤을 호출하는 유효한 방법으로 보지 못합니다.

나는 또한 updateValueAndValidity()성공하지 않고 전화 를 시도했다 :(.

ngControl="dept"양식의 나머지 부분을 사용하지만 사용자 지정 지시문 / 구성 요소를 사용 하는 것처럼 양식 요소에 사용 하려고합니다.

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>

업데이트 날짜 : 19/03/2017

this.form.controls['dept'].setValue(selected.id);

낡은:

지금은 타입 캐스트를해야합니다 :

(<Control>this.form.controls['dept']).updateValue(selected.id)

매우 우아하지 않습니다. 향후 버전에서 이것이 개선되기를 바랍니다.

RC5 + (Angular 2 Final)에는 양식 값을 업데이트하기위한 새로운 API가 있습니다. patchValue()API 방법은 우리가 단지 일부 필드를 지정해야 부분적인 형태로 업데이트를 지원합니다 :

this.form.patchValue({id: selected.id})

setValue()모든 양식 필드가있는 객체가 필요한 API 메소드 도 있습니다. 누락 된 필드가 있으면 오류가 발생합니다.

Aangular 2 final은 API를 업데이트했습니다. 그들은 이것을 위해 많은 방법을 추가했습니다.

컨트롤러에서 폼 컨트롤을 업데이트하려면 다음과 같이하십시오 :

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

오류를 재설정 할 필요가 없습니다

참고 문헌

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

다음 방법을 사용하여 반응 형 컨트롤의 값을 업데이트 할 수 있습니다. 다음 방법 중 하나가 필요에 적합합니다.

setValue ()를 사용하는 메소드

this.form.get("dept").setValue(selected.id);
this.form.controls["dept"].setValue(selected.id);

patchValue ()를 사용하는 메소드

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

마지막 방법은 양식의 모든 컨트롤을 철저히 반복하므로 단일 컨트롤을 업데이트 할 때는 바람직하지 않습니다

이벤트 핸들러 내부의 모든 메소드를 사용할 수 있습니다

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

필요한 경우 양식 그룹에서 여러 컨트롤을 업데이트 할 수 있습니다.

this.form.patchValue({"dept": selected.id, "description":"description value"});

당신은 이것을 시도 할 수 있습니다 :

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].updateValue(selected.id);
}

자세한 내용은 https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/modelupdateValue 메소드 의 두 번째 매개 변수와 관련된 해당 JS Doc을 참조하십시오. ts # L269 .

이 중 어느 것도 나를 위해 일하지 않았습니다. 나는해야했다 :

  this.myForm.get('myVal').setValue(val);

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

각 필드를 수동으로 설정하지 않으려면

@Filoche의 Angular 2 업데이트 솔루션. 사용FormControl

(<Control>this.form.controls['dept']).updateValue(selected.id)

import { FormControl } from '@angular/forms';

(<FormControl>this.form.controls['dept']).setValue(selected.id));

또는 @AngularUniversity의 솔루션 을 사용할 수 있습니다patchValue

나는 대답이 이미 주어 졌음을 알고 있지만 다른 새로운 이민자가 명확한 아이디어를 얻을 수 있도록 양식의 값을 업데이트하는 방법에 대해 약간의 대답을하고 싶습니다.

양식 구조는 예제로 사용하기에 완벽합니다. 그래서 내 대답을 통해 양식으로 표시합니다.

this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required]
  });

그래서 우리의 폼은 3 개의 FormControl 을 가진 FormGroup 타입의 객체입니다 .

모델 값을 업데이트하는 두 가지 방법이 있습니다.

• setValue () 메소드를 사용하여 개별 제어에 대한 새 값을 설정하십시오. setValue () 메소드는 양식 그룹의 구조를 엄격히 준수하며 제어의 전체 값을 대체합니다.

• patchValue () 메소드를 사용하여 양식 모델에서 변경된 오브젝트에 정의 된 특성을 바꾸십시오.

setValue () 메소드의 엄격한 검사는 복잡한 형식의 중첩 오류를 포착하는 데 도움이되는 반면 patchValue ()는 해당 오류에서 자동으로 실패합니다.

Angular 공식 문서 에서 여기

따라서 여러 컨트롤이 포함 된 양식 그룹 인스턴스의 값을 업데이트 할 때 모델의 일부만 업데이트 할 수 있습니다. patchValue ()는 당신이 찾고있는 것입니다.

예를 보자. patchValue () 를 사용하는 경우

this.form.patchValue({
    dept: 1 
});
//here we are just updating only dept field and it will work.

그러나 setValue () 를 사용 하면 양식 그룹의 구조를 엄격하게 준수하므로 전체 모델을 업데이트해야합니다. 우리가 쓰면

this.form.setValue({
    dept: 1 
});
// it will throw error.

양식 그룹 모델의 모든 속성을 전달해야합니다. 이처럼

this.form.setValue({
      name: 'Mr. Bean'
      dept: 1,
      description: 'spome description'
  });

하지만 저는이 스타일을 자주 사용하지 않습니다. 코드를 더 깨끗하고 이해하기 쉽게 유지하는 데 도움이되는 다음 방법을 사용하는 것이 좋습니다.

내가하는 일은 모든 컨트롤을 별도의 변수로 선언하고 setValue ()를 사용하여 해당 컨트롤을 업데이트하는 것입니다.

위의 형식으로, 나는 이런 식으로 할 것입니다.

get companyIdentifier(): FormControl {
    return this.form.get('name') as FormControl;
}

get dept(): FormControl {
    return this.form.get('dept') as FormControl;
}

get description(): FormControl {
    return this.form.get('description') as FormControl;
}

폼 컨트롤을 업데이트해야 할 때 해당 속성을 사용하여 업데이트하십시오. 이 예에서 질문자는 사용자가 드롭 다운 목록에서 항목을 선택할 때 부서 양식 컨트롤을 업데이트하려고했습니다.

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.

  this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}

FormGroup 의 모든 속성과 메서드를 확인하려면 FormGroup API 를 살펴 보는 것이 좋습니다 .

추가 : getter 에 대해 알고 싶다면 여기를 참조 하십시오.

양식 컨트롤을 사용하는 경우 가장 간단한 방법은 다음과 같습니다.

this.FormName.get('ControlName').setValue(value);

팁 : 양식에서 모든 속성을 사용 setValue하지는 않지만 제공하는 경우 오류가 발생합니다.

Must supply a value for form control with name: 'stateOrProvince'.

따라서을 사용 patchValue하고 싶을 수도 있지만 전체 양식을 업데이트하려는 경우 위험 할 수 있습니다. 나는이 address하지 수 stateOrProvince또는 stateCd이 미국이나 전세계 여부에 따라.

대신 null을 기본값으로 사용하는 다음과 같이 업데이트 할 수 있습니다.

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );