Блог

Главная - Вопросы по программированию - Мне нужно послушать, есть ли какие-либо изменения в форме, сделать кнопку включения/выключения СОХРАНЕНИЯ, если есть изменения или нет | Угловой

Мне нужно послушать, есть ли какие-либо изменения в форме, сделать кнопку включения/выключения СОХРАНЕНИЯ, если есть изменения или нет | Угловой

#angular #typescript #subscription

Вопрос:

Возникли проблемы с прослушиванием любых изменений на странице, на которой есть некоторая информация, и даже если никаких изменений нет, кнопка «СОХРАНИТЬ» активна для нажатия

 ngOnInit(): void {
        this.createConfigForm()

        this.configFilterForm.valueChanges.pipe(takeUntil(this.unsubscribeAll$)).subscribe(value => {
            value
        })
 } 
 <!-- ADD BUTTON -->
            <button
                *ngIf="isUpdate()"
                [disabled]="configFilterForm"
                mat-raised-button
                class="add-config-button"
                (click)="onSave()"
                trackClickSnowplow
                id="config-form_save_button"
            >
                <span>SAVE</span>
            </button>

Я думаю, что мне нужно подписаться, но не нашел, где я могу это сделать

Комментарии:

1. Пожалуйста, опубликуйте полный вопрос/код и, возможно, скриншот. Попробуйте Stackblitz, чтобы получить вам быструю и правильную помощь.

2. Я обновил часть кода, фактически теперь кнопка отключена, но она не меняет свое состояние после изменения значения

3. Я прошу опубликовать весь код, который будет полезен сообществу, чтобы помочь вам лучше. Иногда догадки могут привести к неправильным ответам и потере времени.

Ответ №1:

Слушайте изменения формы, как вы делаете это сейчас, и каждый раз, когда происходит изменение, включайте кнопку. Отключите кнопку при нажатии на кнопку, она будет оставаться отключенной до тех пор, пока не произойдет изменение. Что-то вроде:

 configFilterForm: FormGroup;
isDisabled = true;

constructor(private fb: FormBuilder) {
  this.configFilterForm = this.fb.group({
    input1: ['hello']
  });

  this.configFilterForm.valueChanges.pipe(
    takeUntil(this.unsubscribeAll$)
  ).subscribe(value => {
     this.isDisabled = false;
  });
}

И кнопка:

 <button [disabled]="isDisabled">Submit</button>

ВОТ ДЕМО-ВЕРСИЯ

Кстати, я вижу, вы вызываете какую-то функцию *ngIf="isUpdate()" на своей кнопке. Пожалуйста, не делайте этого, они вызываются при каждом обнаружении изменений и могут действительно замедлить работу вашего приложения. Вместо этого используйте переменные!

Комментарии:

1. Большое вам спасибо, это действительно работает, я просто добавил часть кода, чтобы запустить его правильно=)

Ответ №2:

В вашем HTML-файле;

 <form [formGroup]="formAngular" (ngSubmit)="onSubmit()">
        <label>Name</label>
        <input type="text" formControlName="name">

        {{formAngular.controls.name.errors | json}}

        <p 
            *ngIf="formAngular.controls.name.errors?.required amp;amp; formAngular.controls.name.touched amp;amp; formSend">
            It is required your name
        </p>

    <input type="submit" value="Send"  />

    <p  *ngIf="formSend amp;amp; !formAngular.valid">Form is not complete</p>

</form>

В файле TS вашего компонента;

   formAngular: FormGroup;

  formSend: boolean;

  constructor() {
    this.formSend = false;
    this.formAngular = new FormGroup({
      name: new FormControl('', [
        Validators.required,
        Validators.maxLength(10)
      ])
  }

onSubmit() {
    this.formSend = true;
    console.log("Form value: ", this.formAngular.value);
  }


ngOnInit() {
    const controlName = this.formAngular.controls.name;
    controlName.valueChanges.pipe(debounceTime(500)).subscribe(value => {
      console.log("Your changes: ", value);
    });
  }
Метки: , , ,