html表单不能为空设置默认值,javascript-无法使用带有共享组件的formControl绑定默认值...

您好,这里是您的代码经过重构的stackblitz.

首先,如果要显示控件的值,则必须将其传递到将其可视化的位置.

应用组件

placeHolder="select district"

[dataList]="['bangalore','chennai','pune']">

placeHolder="select distance"

[dataList]="[100,200,300,400]">

placeHolder="select state"

[dataList]="['karnataka','tamil nadu','mumbai']">

submit

在您的情况下,我已将新输入添加到您的app-common-下拉列表中,称为controlForDisplay,以将所需formControl的引用传递给组件.我还删除了dropdownId,该操作的原因我将在后面解释.

common-dropdown.component.html

class="cs-select cs-skin-border"

tabindex="0">

{{!!controlForDisplay.value ? controlForDisplay.value : placeHolder }}

• {{item}}

因此,现在我们要转到common-dropdown.component.html,其中重要的部分是以下行

{{!! controlForDisplay.value吗？ controlForDisplay.value：placeHolder}}

现在,通过添加的controlForDisplay输入,我们可以访问包含所需下拉列表默认值的formControl引用,并在存在任何默认值的情况下可视化该控件,或者在表单控件为空时显示占位符.

commpon-dropdown.component.ts

@Component({

selector: 'app-common-dropdown',

templateUrl: './common-dropdown.component.html',

styleUrls: ['./common-dropdown.component.css']

})

export class CommonDropdownComponent {

@Input() placeHolder: string;

@Input() dataList: any;

@Input() controlForDisplay: FormControl = new FormControl()

dropdownOpen = false;

selectClicked(event: any) {

this.dropdownOpen = true

}

selectOption(value: string) {

this.controlForDisplay.patchValue(value)

this.closeDropDown('')

}

closeDropDown(event: any) {

this.dropdownOpen = false;

}

}

这里的主要变化是,我们不使用本机元素,而是通过formControl API(称为补丁值)通过formControl值更新了formControl值,这样做是通过从父组件和当前组件访问的整个窗体进行更新.

ps.

您必须在app.module内部添加CommonModule.

几乎可以解决您的问题.请记住,在使用Angular创建网页而不是使用DOM API时,使用Angular API几乎总是更可取的,我建议您使用Tour of Heroes,这是官方的angular教程.