Angular 表单：补丁值后无法在字段中键入

Question

我有一个从数据中切换的表单-table。当我使用 patchValue 预填写表单时，我无法编辑该字段的内容。未填充 patchValue 的字段为 updatable.

这是控制器设置

@Input() signalMutate: Signal;

  signalForm: FormGroup;
  loading = false;
  submitted = false;
  error: string;
  formSignalValue: Signal;

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private authenticationService: AuthenticationService,
    private userService: UserService

  ) { }

  ngOnInit() {
    this.signalForm = this.formBuilder.group({
      title: [''],
      description: ['', Validators.required],
      problem: ['', Validators.required],
      value: ['', Validators.required],
      requestor: ['', Validators.required],
      label: ['']
  });


  }

  ngAfterContentChecked(){

    if(this.signalMutate) { 

        this.signalForm.patchValue(this.signalMutate);

    }

  }

知道为什么会这样吗？

谢谢！

Answer 1

因为您是在 afterContentChecked 挂钩中执行此操作，每个更改检测周期运行都会触发更改检测，并且每次输入输入时都会触发更改检测，因此您只需将值重置为任何 signalMutate 即可每次打字。

这样做：

private _signalMutate: Signal;
@Input() set signalMutate(signalMutate: Signal) {
  this._signalMutate = signalMutate
  this.signalForm.patchValue(signalMutate);
}
get signalMutate() {
  return this._signalMutate
}

setter输入运行当输入改变时。如果您希望更改反映在表单中，此设置还需要您确保您永远不会改变传入的信号对象。确保您始终创建一个新对象，例如：

this.signal = {...this.signal, ...newSignal }

像这样避免对象突变在任何情况下通常都被认为是好的做法，可以提高应用程序性能，并有助于避免难以发现的错误（像这样）

Angular 表单：补丁值后无法在字段中键入

Angular Forms: after a patchValue unable to type in field

angular2-formbuilder

angular