角度形式禁用对valueChanges的控制

Question

我试图在我的一个表单组值更改时禁用表单控件，但问题是方法disable()和enable()也更新表单状态，所以我有一个无限循环。

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="questionForm">

     <input type="text" formControlName="question" />

     <input type="text" formControlName="other"/>
   </form>
  `,
})
export class App {

  constructor(private fb: FormBuilder) {  
     this.questionForm = this.fb.group({
       question: [''],
       other: ['']
     });
  }

  ngOnInit() {
     this.questionForm.valueChanges.subscribe(v => {
       if(v.question === 'test') {
         this.questionForm.get('other').disable();
       } else {
          ...enable()
       }
     })
  }

}

我怎么解决这个问题？

Answer 1

好吧，根据官方文档，您可以使用指令进行自定义验证，当然，在您的情况下，可以应用逻辑来检查用户输入的内容，然后禁用并启用其他字段。 那里有很多代码，sooooo ......

...如果你不想要那么多代码，你也可以做一个小的黑客攻击。 让我们调用一个函数来检查用户键入的内容。 我们还需要绑定this ，所以我们可以参考questionForm ：

 this.questionForm = this.fb.group({
   question: ['', [this.checkString.bind(this)]],
   other: ['']
 });

然后功能：

checkString(control: FormControl) {
  if(control.value == 'test') {
    this.questionForm.get('other').disable()
  }
  // we need to check that questionForm is not undefined (it will be on first check when component is initialized)
  else if (this.questionForm) { 
    this.questionForm.get('other').enable()
  }
}

这似乎符合它的目的。

演示

希望这可以帮助！ :)

Answer 2

使用反应形式，你可以这样做：

question: {value: '', disabled: true }

Answer 3

我首先将一个属性isDisabled添加到您的组件，然后我将使用[disabled]指令。 这将解决您的循环问题。

@Component({
    selector: 'my-app',
    template: `
<form [formGroup]="questionForm">

    <input type="text" formControlName="question" />

    <input type="text" formControlName="other" [disabled]="isDisabled" />
</form>
`,
})
export class App {

    isDisabled = false;

    constructor(private fb: FormBuilder) {
        this.questionForm = this.fb.group({
            question: [''],
            other: ['']
        });
    }

    ngOnInit() {
        this.questionForm.valueChanges.subscribe(v => {
            if (v.question === 'test') {
                this.isDisabled = true;
            } else {
                this.isDisabled = false;
            }
        })
    }

}

Answer 4

使用两个控件和一个* ngIf指令添加另一个解决反应形式问题的答案。 请参阅https://github.com/angular/angular/issues/11324 。

此解决方案可能并不理想，因为它要求您添加第二个表单控件，该控件将在满足更改isDisabled属性的条件时显示。 这意味着在提交表单时需要管理两个控件。

@Component({
    selector: 'my-app',
    template: `
<form [formGroup]="questionForm">

    <input type="text" formControlName="question" />

    <input *ngIf="isDisabled" type="text" formControlName="other" disabled />
    <input *ngIf="!isDisabled" type="text" formControlName="other2"  />
</form>
    `
    providers: [FormBuilder]
})
export class App {

    isDisabled = true;

    constructor(private fb: FormBuilder) {
        this.questionForm = this.fb.group({
            question: [''],
            other: [''],
            other2: ['']
        });
    }

    ngOnInit() {
        this.questionForm.valueChanges.subscribe(v => {
            if(v.question === 'test') { 
                this.isDisabled = false;
            } else {
                this.isDisabled = true;
            }
        });
    }

}

如果您愿意，可以检查或玩弄羽毛球：

https://plnkr.co/edit/0NMDBCifFjI2SDX9rwcA