запросить подтверждение перед изменением формы управления angular реактивная форма - PullRequest
Новая
       48

запросить подтверждение перед изменением формы управления angular реактивная форма

0 голосов
/ 10 января 2020

Я хочу спросить пользователя, прежде чем он перейдет на какой-либо элемент управления формы, использующий реактивную форму.

Допустим, когда вы печатаете / выбираете в поле ввода / выбора, сначала должно появиться предупреждение, говорящее «хотите ли вы сделать это изменение », если пользователь говорит« да », то только обновлять элемент управления формы.

Я добился этого с помощью шаблонно-управляемой формы, но не смог сделать это с помощью реактивных форм.

https://stackblitz.com/edit/angular-nyohjv?file=src%2Fapp%2Fapp.module.ts

код 


  Form control value change prevent in template driven form
  
  {{selectedDevice}}

  

  {{textValue}}



  Form control value change prevent in reactive form

  
    
      
      
    
  

  {{reactiveForm.value | json}}
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { pairwise, startWith } from 'rxjs/operators';

@Component({
  selector: 'kar-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  textValue = '2';

  selectedDevice = 'd2';

  devices = ['d1', 'd2', 'd3'];

  reactiveForm: FormGroup;

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
    private fb: FormBuilder
  ) {}

  onChange(val) {
    console.log('PREV1', this.textValue);
    // this.textValue = val;
    console.log('NEXT1', val);
    console.log('----');

    console.log(val);
    if (confirm('device value will be changed')) {
      this.textValue = val;
    } else {
      const temp = this.textValue;
      this.textValue = '1';
      this.changeDetectorRef.detectChanges();
      this.textValue = temp;
      this.changeDetectorRef.detectChanges();
    }
  }

  onDeviceChange(val) {
    console.log(val);
    if (confirm('device value will be changed')) {
      this.selectedDevice = val;
    } else {
      const temp = this.selectedDevice;
      this.selectedDevice = '1';
      this.changeDetectorRef.detectChanges();
      this.selectedDevice = temp;
      this.changeDetectorRef.detectChanges();
    }
  }

  ngOnInit() {
    // setTimeout(() => {
    //   this.selectedDevice = 'd3';
    // }, 2000);
    this.reactiveForm = this.fb.group({
      example1: ['']
      // example2: ['']
    });

    // this.reactiveForm.get('example1').valueChanges.subscribe(val => {
    //   console.log('example 1', val);
    // });

    // this.reactiveForm.get('example2').valueChanges.subscribe(val => {
    //   console.log('example 2', val);
    // });
    const control = this.reactiveForm.get('example1');

    control.valueChanges
      .pipe(startWith(''), pairwise())
      .subscribe(([prev, cur]) => {
        console.log('example 1 prev val', prev);
        console.log('example 1 cur val', cur);
        console.log('---');

        if (confirm('value will be changed')) {
        } else {
          control.setValue(prev, { emitEvent: false });
        }
      });
  }
}

1 Ответ

0 голосов
/ 26 апреля 2020

Это не очень хороший способ сделать это .. но если emitEvent установлен на true, он сделает эту работу. Чтобы не заходить в valueChanges снова и снова, вы можете использовать логическое значение. Например showAlert в следующем: 

var showAlert = true;
control.valueChanges ...

    if(showAlert)
    {

      if (confirm('value will be changed')) {
      } else {
        //control.setValue(null, {emitEvent:true})
        showAlert = false;
        control.setValue(prev, { emitEvent: true });
      }
    }
    else
    {
      showAlert  = true;
    }

  }...
...