英文:
Angular Reactive Form - Control disable()
问题
我可以帮你翻译你提供的内容：
我无法找到解决我的特定问题的方法，我有一个响应式表单，在其中我想根据单选按钮的更改禁用选择字段，但`disable()`函数不起作用。
这是我的表单：
```typescript
ngOnInit() {
this.createForm();
}
createForm(): void {
this.bsiNotesForm = this.formBuilder.group({
searchType: new FormControl(this.searchCriteriaEnum.AllNotes),
newNotes: new FormControl(false),
bsiNumberToSearch: new FormControl(''),
modelsToSearch: new FormControl({ value: '', disabled: true }),
});
}
这是切换函数，我试图在searchType等于searchCriteriaEnum.AllNotes时禁用选择字段：
toggleSearchType() {
const searchType = this.bsiNotesForm.get('searchType')?.value;
if (searchType === this.searchCriteriaEnum.ByModel) {
console.log(searchType)
this.bsiNotesForm.get('modelsToSearch')?.enable();
} else {
this.bsiNotesForm.get('modelsToSearch')?.disable();
console.log(searchType)
this.bsiNotesForm.get('modelsToSearch')?.reset();
}
}
这是选择和单选按钮的模板：
<custom-select
[name]="'modelsToSearch'"
formControlName="modelsToSearch"
[options]="modelsData"
>
</custom-select>
<custom-radio
[options]="[
{ value: searchCriteriaEnum.AllNotes, label: 'All Notes' },
{ value: searchCriteriaEnum.ByModel, label: 'By Model' }]"
formControlName="searchType"
(change)="toggleSearchType()"
>
</custom-radio>
如果需要更多的代码和解释，请随时提问！
英文:
I can't find a solution to my specific Problem i have my Reactive Form where i want to disable select field based on radio element change and disable() function is not working.
Here is my form:
ngOnInit() {
this.createForm();
}
createForm(): void {
this.bsiNotesForm = this.formBuilder.group({
searchType: new FormControl(this.searchCriteriaEnum.AllNotes),
newNotes: new FormControl(false),
bsiNumberToSearch: new FormControl(''),
modelsToSearch: new FormControl({ value: '', disabled: true }),
});
}
Here is the toggle Function where im trying to disable the Select Field when the searchType is equals to searchCriteriaEnum.AllNotes
toggleSearchType() {
const searchType = this.bsiNotesForm.get('searchType')?.value;
if (searchType === this.searchCriteriaEnum.ByModel) {
console.log(searchType)
this.bsiNotesForm.get('modelsToSearch')?.enable();
} else {
this.bsiNotesForm.get('modelsToSearch')?.disable();
console.log(searchType)
this.bsiNotesForm.get('modelsToSearch')?.reset();
}
}
here is the select and radio template
<custom-select
[name]="'modelsToSearch'"
formControlName="modelsToSearch"
[options]="modelsData"
>
</custom-select>
<custom-radio
[options]="[
{ value: searchCriteriaEnum.AllNotes, label: 'All Notes' },
{ value: searchCriteriaEnum.ByModel, label: 'By Model' }]"
formControlName="searchType"
(change)="toggleSearchType()"
>
</custom-radio>
if i need to provide more code and explanation feel free to ask !
答案1
得分: 0
我理解到您需要根据自定义单选按钮的更改禁用和启用表单的modelsToSearch字段。这似乎没问题，但由于您同时使用了custom-radio和custom-select字段，我担心它们的实现可能会出现潜在问题。另一点需要考虑的是订阅searchType值的更改。
英文:
What I understood is that you need to disable and enable the modelsToSearch field of your form depending on the change in the custom-radio selection. This seems okay, but since you have both custom-radio and custom-select fields, I am worried about a potential issue in their implementation. Another thing to consider is subscribing to the searchType valueChanges.
答案2
得分: 0
抱歉，我没有回答评论，因为我在处理我的应用程序的其他部分。
我在这个主题中找到了解决我的问题的方法：
https://stackoverflow.com/questions/40163367/angular-2-custom-form-control-disable
问题是我没有在我的自定义选择组件中使用setDisbledState()函数。在使用控制值访问器时，这很重要。
TS文件：
disabled = false;
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
HTML文件：
<select [disabled]="disabled">
<option> ... </option>
</select>
英文:
Sorry for not answering the comments i was working on other parts of my application.
I found solution to my Problem with help of this topic
https://stackoverflow.com/questions/40163367/angular-2-custom-form-control-disable
The problem was that i didnt used the setDisbledState() function in my custom select component. It is important when we are working with Control Value Accessor.
TS file:
disabled = false;
setDisabledState(isDisabled: boolean) {
this.disabled = isDisabled;
}
HTML file:
<select [disabled]="disabled" >
<option> ... </option>
</select>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论