Javascript 角度形状禁用对值更改的控制

当我的一个表单组值更改时，我试图禁用表单控件，但问题是方法

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()
       }
     })
  }

}

@组件({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
构造函数（私有fb:FormBuilder）{
this.questionForm=this.fb.group({
问题：['']，
其他：['']
});
}
恩戈尼尼特（）{
this.questionForm.valueChanges.subscribe（v=>{
如果（v.question==‘test’）{
this.questionForm.get（'other'）.disable（）；
}否则{
…启用（）
}
})
}
}

---

如何解决此问题？

我将首先向组件添加一个属性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;
            }
        })
    }

}

@组件({
选择器：“我的应用程序”，
模板：`
`,
})
导出类应用程序{
isDisabled=false；
构造函数（私有fb:FormBuilder）{
this.questionForm=this.fb.group({
问题：['']，
其他：['']
});
}
恩戈尼尼特（）{
this.questionForm.valueChanges.subscribe（v=>{
如果（v.question==‘test’）{
this.isDisabled=true；
}否则{
this.isDisabled=false；
}
})
}
}

对于反应式表单，您可以这样做：

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

---

使用两个控件和一个*ngIf指令添加另一个答案，以解决被动表单问题。看

此解决方案可能并不理想，因为它要求您添加第二个表单控件，当满足更改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;
            }
        });
    }

}

@组件({
选择器：“我的应用程序”，
模板：`
`
提供者：[表单生成器]
})
导出类应用程序{
isDisabled=true；
构造函数（私有fb:FormBuilder）{
this.questionForm=this.fb.group({
问题：['']，
其他：['']，
其他2:['']
});
}
恩戈尼尼特（）{
this.questionForm.valueChanges.subscribe（v=>{
如果（v.question=='test'）{
this.isDisabled=false；
}否则{
this.isDisabled=true；
}
});
}
}

如果您愿意，请查看或玩plunker：

好吧，根据您可以使用指令进行自定义验证，当然在您的情况下，这可以与检查用户输入的内容，然后禁用和启用其他字段的逻辑一起应用。那里有很多代码，所以

…如果你不需要那么多代码，你也可以做一个小规模的黑客攻击。让我们调用一个函数来检查用户键入的内容。我们还需要绑定

此

，因此我们可以参考

问题表单

：

this.questionForm=this.fb.group({
问题：[''[this.checkString.bind（this）]，
其他：['']
});

然后函数：

checkString（控件：FormControl）{
如果（control.value=='test'）{
this.questionForm.get（'other'）.disable（）
}
//我们需要检查questionForm是否未定义（当组件初始化时，它将在第一次检查时）
否则，如果（本问题表）{
this.questionForm.get（'other'）.enable（）
}
}

这似乎符合它的目的

---

希望这有帮助！：）

@AJT_82是对的，我认为它只是来自Angular版本4，但这是一个错误的答案。你对反应形式的看法绝对正确。我正在添加另一个答案，这有点像黑客，但希望能有所帮助。这不是动态的。@ng2user？？我不理解您的评论？您可以动态更改该值