반응형의 양방향 바인딩

반응형의 양방향 바인딩

Angular 2를 사용하면 템플릿 기반 양식에서 양방향 바인딩이 쉬워집니다. 바나나 상자 구문만 사용하면 됩니다.모델 중심의 형태로 이 동작을 어떻게 복제하시겠습니까?

예를 들어, 여기 표준 반응형이 있습니다.다양한 입력과 비즈니스 논리로 보기보다 훨씬 복잡하며, 따라서 템플릿 중심 접근 방식보다 모델 중심 접근 방식에 더 적합하다고 가정해 보겠습니다.

    export class ExampleModel {
        public name: string;
        // ... lots of other inputs
    }

    @Component({
        template: `
            <form [formGroup]="form">
                <input type="text" formControlName="name">
                ... lots of other inputs
            </form>

            <h4>Example values: {{example | json}}</h4>
        `
    })
    export class ExampleComponent {
        public form: FormGroup;
        public example: ExampleModel = new ExampleModel();

        constructor(private _fb: FormBuilder) {
            this.form = this._fb.group({
                name: [ this.example.name, Validators.required ]
                // lots of other inputs
            });
        }

        this.form.valueChanges.subscribe({
            form => {
                console.info('form values', form);
            }
        });
    }

에서subscribe()양식 값에 모든 종류의 논리를 적용하고 필요에 따라 매핑할 수 있습니다.그러나 양식의 모든 입력 값을 매핑하고 싶지는 않습니다.나는 단지 전체의 가치를 보고 싶을 뿐입니다.employee업데이트 시 모델링, 유사한 접근 방식[(ngModel)]="example.name"템플릿의 json 파이프에 표시된 대로입니다.어떻게 하면 이 일을 해낼 수 있을까요?

참고: @Clouse24에서 언급한 바와 같이, "ngModel과 함께 반응성 프롬을 사용하는 것은 Angular 6에서는 더 이상 사용되지 않으며 Angular 이후 버전에서는 제거될 것입니다."(아래 답변은 앞으로 더 이상 지원되지 않을 것임을 의미합니다.링크를 읽어보면 비권장 이유를 알 수 있고 대안이 무엇인지 알 수 있습니다.

사용할 수 있습니다.[(ngModel)]반응형을 사용합니다.

템플릿

<form [formGroup]="form">
  <input name="first" formControlName="first" [(ngModel)]="example.first"/>
  <input name="last" formControlName="last" [(ngModel)]="example.last"/>
</form>

요소

export class App {
  form: FormGroup;
  example = { first: "", last: "" };

  constructor(builder: FormBuilder) {
    this.form = builder.group({
      first: "",
      last: ""
    });
  }
}

플런커

이 지침은 다음 지침 없이 사용되는 지침과 완전히 다릅니다.formControlName반응형을 사용하면 다음과 같습니다.FormControlNameDirective다음을 제외하고는formControlName,그NgModel지시문이 사용됩니다.

때로는 [(ngModel)]을(를) 반응형 양식과 결합해야 할 수도 있습니다.양식의 일부로 필요하지 않은 입력 컨트롤이 될 수 있지만 컨트롤러에 바인딩해야 합니다.그런 다음 다음을 사용할 수 있습니다.[(ngModel)]="something" [ngModelOptions]="{standalone: true}"

문제를 해결할 수 있는 방법은(는 다음과 같습니다.

• 바로 가기 --> STACKBLITZ

의 결과를 얻기 위해two-way-binding

로컬 "템플릿 변수"를 사용하고 두 필드 모두에 대해 동일한 formControl을 사용합니다.

<form [formGroup]="formGroup">
  <input #myInput (input)="mySlider.value = myInput.value" type="number" formControlName="twoWayControl">

  <mat-slider #mySlider (input)="myInput.value = mySlider.value" formControlName="twoWayControl" min="1" max="100">
  </mat-slider>

</form>

사용하는 모델의 값을 프로그래밍 방식으로 변경하려는 경우setValue()남들이 공언한 바와 같이

setTo33() {
  this.formGroup.get('twoWayControl').setValue(33);
}

    // Allow two way binding on the [(name)] from the parent component
    private nameValue: string;
    @Input()
    get name() {
        return this.nameValue;
    }
    set name(values) {
        this.nameValue = values;
        this.nameChange.emit(this.nameValue);
    }
    @Output() nameChange = new EventEmitter<string>();

    ngOnInit() {
        // Update local value and notify parent on control value change
        this.formControl.valueChanges.forEach(value => this.name = value));
    }

    ngOnChanges() {
        // Update local value on parent change
        this.formControl.setValue(this.expression);
    }

Angular 6+ 솔루션...

저도 양방향 데이터 바인딩을 사용하면서 반응형 검증을 원합니다.내가 생각해낸 가장 좋은 해결책은 양식 그룹의 것을 낚아채는 것이었습니다.valueChanges와 함께하는 이벤트debounce모델을 업데이트하는 타이머입니다.다음은 예입니다.

<form [formGroup]="form">
  <input class="form-control" type="date" name="myDate" formControlName="myDate">
</form>

public myModel = {
  myDate: '2021-01-27'
};

public form = this.builder.group({
  myDate: [this.myModel.myDate, [Validators.required]],
});

// Don't update the model with every keypress, instead wait 1s and then update
this.form.valueChanges.pipe(debounceTime(1000)).subscribe((changes) => {
  for (let key of Object.keys(changes)) {
    this.myModel[key] = values[key];
  }
});

복사/붙여넣기를 더 잘 돕기 위해 주어진 변경 사항으로 모델의 모든 속성 값을 업데이트할 것입니다.양방향 데이터 바인딩을 사용하여 하나의 속성만 업데이트하려는 경우 다음과 같은 방법을 사용해야 합니다.

this.form.get('myDate').valueChanges.pipe(debounceTime(1000)).subscribe((changes) => {
  this.myModel.myDate = changes.myDate;
});

입력 값을 표시하려면 입력에 변수를 만들어 템플릿에서 사용하십시오.

<form [formGroup]="form">
  <input type="text" formControlName="name" #name>
  ... lots of other inputs
</form>

<h4>Example values: {{ name.value }}</h4>

ngModel 또는 Template 기반 폼과 반응형 폼(모델 기반 폼)을 함께 혼합할 수 있습니다.예를 들어 TDF를 사용하면 구독 없이 데이터를 쉽게 읽을 수 있고, 반면 MDF를 사용하면 몇 가지 검증을 제공할 수 있습니다. 하지만 그 중 하나만 선택하고 싶습니다.

TDF의 가장 큰 단점은 유닛 테스트를 적용할 수 없다는 것이고 반대로 TDF를 사용할 때 템플릿이 훨씬 더 더럽다는 것입니다.

반응형 양식을 사용하여 양방향 바인딩을 수행할 수 있습니다.

constructor(private fb: FormBuilder)

this.formData= fb.group({
        variable: new FormControl(value,Validators.required)
      })
      
      //the 'value' attribute carries the value you want to bind

var value="Eamanpreet Singh"

<form [formGroup]="formData" (ngSubmit)="submit();">
      <mat-form-field>
            <input matInput placeholder="Name" formControlName="variable">
      </mat-form-field>

언급URL : https://stackoverflow.com/questions/40458739/two-way-binding-in-reactive-forms