Question

我有一个选择国家/地区下拉列表，其默认值为＆＃34;选择＆＃34;。页面底部有一个提交按钮，只有在下拉列表中包含某些国家/地区值时才会启用该按钮。对于默认值，应禁用该按钮，因为它是必填字段。

我已经为.ts文件中的下拉列表创建了一个组件。

@component({

selector:'country-component',
template:'<form>
<select>
<option [disabled]="butDisabled">Select</option>
<option [value]="" *ngFor="let country of countryList">{{country.label}}</option>
</select>
</form>'

})

export class countryComponent implements onInit{
butDisabled: boolean = true;
}

在我的HTML中 -

<country-component (ngModelOptions)="{standalone:true}" name=""></country-component>

<button>Submit</button>

这不起作用。它会禁用整个下拉列表。任何人都可以让我知道我哪里出错了。

Answer 1

您需要让父组件知道何时选择国家/地区。

从country-component

定义输出参数

添加导入

import { Output, EventEmitter } from '@angular/core';

并添加输出参数

export class countryComponent implements onInit{
    @output countrySelected = new EventEmitter(); // <-- define output parameter
}

选择国家/地区时，您需要发出该输出。将以下功能添加到country-component

onChange(selectedCountry) {
    this.countrySelected.emit(selectedCountry); // <-- emit when a country selected
}

此外，您需要对选择进行更改以调用新的onChange功能

<select (change)="onChange($event.target.value)">
    <option>Select</option>
    <option [value]="" *ngFor="let country of countryList">{{country.label}</option>
</select>

现在您的country-component已准备好让父母知道何时选择了某个国家/地区。

在父组件中定义输出参数，如：

<country-component (ngModelOptions)="{standalone:true}" name="" (countrySelected)="enableSubmit($event)"></country-component>

并在父组件

中定义一个函数

submitEnabled : bool = false;

enableSubmit(event: any){
    this.submitEnabled = true;
}

并将您的按钮绑定到submitEnabled变量。

<button [disabled]="!submitEnabled">Submit</button>

禁用角度2表单中默认下拉值的提交按钮

1 个答案: