文本框输入不能以反应性形式工作

Question

我使用的是角反应形式，并有以下控件：

 this.taskForm = this.formBuilder.group({
      storyNumber: new FormControl('', [Validators.required, Validators.pattern('^[A-Z]{2,}[0-9]*-[0-9]{2,}$')]),
      category: new FormControl({value:'', disabled: true}, Validators.required),
      taskName: new FormControl({value:'', disabled: true}, Validators.required),
      effortLevel: new FormControl({value:'', disabled: true}, Validators.required),
      complexityLevel: new FormControl({value:'', disabled: true}, Validators.required),
      note: new FormControl({value:'', disabled: true})
    })

其思想是，在开始时只启用故事号控件；但是，一旦用户输入有效的故事号，其他窗体控件就会启用。我的问题是，在启动应用程序时，所有的窗体控件都会被禁用，而不是在故事号输入中输入任何内容，即使它被标记为已启用。

控件的代码如下：

 <input id="storynumber"
             class="form-control"
             type="text"
             (keyup)="updateFormStoryNumber();"
             (ngModelChange)="updateFormStoryNumber()"
             formControlName="storyNumber">

有什么想法吗？

Answer 1

taskForm = this.formBuilder.group({
      storyNumber: ['', [Validators.required, Validators.pattern('^[A-Z]{2,}[0-9]*-[0-9]{2,}$')]],
      category: [{value:'', disabled: true}, Validators.required],
      taskName: [{value:'', disabled: true}, Validators.required],
      effortLevel: [{value:'', disabled: true}, Validators.required],
      complexityLevel: [{value:'', disabled: true}, Validators.required],
      note: [{value:'', disabled: true}]
 })

constructor(){
      this.taskForm.get('storyNumber')?.valueChanges.subscribe((data)=>{
      // Your logic here
      this.enableField('category') 
      // Enable or
      this.disableField('category')
 })

  enableField(fieldName:string){
    this.taskForm.get(fieldName)?.enable()
  }

  disableField(fieldName:string){
    this.taskForm.get(fieldName)?.disable()
  }

Answer 2

当我们使用formControlName或formControl进行输入时，我们应该使用而不是 use (ngModelChange)或(keyup)，如果您想在更改时执行某些操作，则可以使用(输入)或(更改)。

关于禁用FormControl，众所周知，可以使用指令启用/禁用FormControl，参见，例如this SO (*)

现在您可以简单地使用

<form [formGroup]="taskForm">

    <!--your input storyNumber-->
    <input id="storynumber"
             class="form-control"
             formControlName="storyNumber">

    <!--all the rest of your input using the directive-->
    <input id="category"
             class="form-control"
             [disableControl]="taskForm.get('storyNumber').errors"
             formControlName="category">
    <input id="taskName"
             class="form-control"
             [disableControl]="taskForm.get('storyNumber').errors"
             formControlName="taskName">
    ...
</form>

注意不要在.ts中添加“额外代码”

(*)另一种方法是使用attrb.disabled=“条件”，但在本例中，您不是禁用FormControl，而是禁用FormControl输入

注意:在指令中，按条件更改“条件:布尔”：布尔值为null(不要忘记在模块导入中包含指令)

import { NgControl } from '@angular/forms';
@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {
  @Input() set disableControl( condition : boolean| null ) {
    if (condition)
        this.ngControl.disable();
    else
        this.ngControl.enable();
  }

  constructor( private ngControl : NgControl ) {
  }
}