如何使用信号禁用/启用反应形式

Question

我想根据

formGroup

输入禁用/启用

signal

。我不想使用

[disabled]

来切换表单。

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <input formControlName="test"/>
    </form>
  `,
})
export class Child {
  disableForm = input(false);
  name = 'Angular';
  form = new FormGroup({
    test: new FormControl(1),
  });

  ngOnInit() {}
}

家长传递输入，如下所示。

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child],
  template: `
    <app-child [disableForm]="disableForm()"/>
    <button (click)="toggleDisabled()">toggle disable</button>
  `,
})
export class App {
  disableForm = signal(false);

  toggleDisabled() {
    this.disableForm.update((value: boolean) => !value);
  }
}

寻找一种根据信号变化触发/反应的方法。

Answer 1

这可以通过

input

信号来完成，基本上我们使用

effect

在信号变化时执行逻辑，在此基础上我们使用

disableForm

或

enableForm

启用和禁用表单。

disableForm = input(false);
...

...
constructor() {
  effect(() => {
    if (this.disableForm()) {
      this.form.disable();
    } else {
      this.form.enable();
    }
  });
}

然后按下按钮，我们使用

update

方法切换信号，在更新中，我们获取之前的值，返回的值将更新为新值。

disableForm = signal(false);

toggleDisabled() {
  this.disableForm.update((value: boolean) => !value);
}

信号可以作为输入传递给子组件。

<app-child [disableForm]="disableForm()"/>
<button (click)="toggleDisabled()">toggle disable</button>

完整代码：

import { Component, effect, input, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <input formControlName="test"/>
    </form>
  `,
})
export class Child {
  disableForm = input(false);
  name = 'Angular';
  form = new FormGroup({
    test: new FormControl(1),
  });

  constructor() {
    effect(() => {
      if (this.disableForm()) {
        this.form.disable();
      } else {
        this.form.enable();
      }
    });
  }

  ngOnInit() {}
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child],
  template: `
    <app-child [disableForm]="disableForm()"/>
    <button (click)="toggleDisabled()">toggle disable</button>
  `,
})
export class App {
  disableForm = signal(false);

  toggleDisabled() {
    this.disableForm.update((value: boolean) => !value);
  }
}

bootstrapApplication(App);

Stackblitz 演示