javascript - 如何使我的 formGroup 默认返回 [ngValue]="null"？

问题描述

我正在使用 Angular 6 中的反应式表单。我有一个 FormGroup，它有许多选择下拉输入。如果用户尚未选择任何内容，则每个选项都有一个默认值。这些输入不是必需的，如果它们不适用，用户可以跳过其中的许多输入。在用户做出选择并点击搜索按钮后，下拉输入中的值将通过 router.navigate() 添加到 url。

当用户导航回页面时，这些值通过我的 ngOnInit() 中的 route.snapshot.queryParamMap.get() 再次出现，这正是我想要的。但是，如果用户跳过任何选择输入而不是显示默认值，则选择输入显示为空白。我期望的是默认值再次出现。我可以通过控制台记录 providerForm 对象看到它正在按我的预期返回所有内容，但看起来 null 并没有绑定回 [ngValue] 我该如何解决这个问题？

下面是相关代码。我的 [formGroup]="providerForm" 位于未在下面显示的顶级表单元素上。

<section class="results__filters__section card">
                <div class="input-wrapper">
                    <p class="t-title t-bold">Specialty</p>
                    <div class="input input--select u-fillRemaining">
                        <select formControlName="specialty">
                            <option [ngValue]="null">Select Specialty</option>
                            <option [value]="speciality" *ngFor="let speciality of options.specialities">{{speciality}}</option>
                        </select>
                    </div>
                </div>

                <div class="input-wrapper">
                    <p class="t-title t-bold">Language</p>
                    <div class="input input--select u-fillRemaining">
                        <select formControlName="language">
                            <option [ngValue]="null">Select Language</option>
                            <option [value]="language" *ngFor="let language of options.languages">{{language}}</option>
                        </select>
                    </div>
                </div>

                <div class="input-wrapper">
                    <p class="t-title t-bold">Gender</p>
                    <div class="input input--select u-fillRemaining">
                        <select formControlName="gender">
                            <option [ngValue]="null">Select Gender</option>
                            <option [value]="gender" *ngFor="let gender of options.gender">{{gender}}</option>
                        </select>
                    </div>
                </div>

                <div class="input-wrapper">
                    <p class="t-title t-bold">Distance</p>
                    <div class="input input--select u-fillRemaining">
                        <select formControlName="distance">
                            <option [ngValue]="null">Select Distance</option>
                            <option [value]="distance" *ngFor="let distance of options.distance">{{distance}}</option>
                        </select>
                    </div>
                </div>

                <div class="input-wrapper">
                    <p class="t-title t-bold">Hospital Affiliation</p>
                    <div class="input input--select u-fillRemaining">
                        <select formControlName="affiliation">
                            <option [ngValue]="null">Select Hospital</option>
                            <option [value]="affiliation" *ngFor="let affiliation of options.affiliation">{{affiliation}}</option>
                        </select>
                    </div>
                </div>
</section>

// 组件.ts

ngOnInit() {
    this.specialtyQuery = this.route.snapshot.queryParamMap.get('specialty');
    this.languageQuery = this.route.snapshot.queryParamMap.get('language');
    this.genderQuery = this.route.snapshot.queryParamMap.get('gender');
    this.distanceQuery = this.route.snapshot.queryParamMap.get('distance');
    this.affiliationQuery = this.route.snapshot.queryParamMap.get('affiliation');
    this.primaryCareQuery = this.route.snapshot.queryParamMap.get('primaryCare');
    this.accomodationsQuery = this.route.snapshot.queryParamMap.get('accomodations');
    this.newPatientsQuery = this.route.snapshot.queryParamMap.get('newPatients');

    this.providerForm = this.fb.group({
        specialty: this.specialtyQuery || null,
        language: this.languageQuery || null,
        gender: this.genderQuery || null,
        distance: this.distanceQuery || null,
        affiliation: this.affiliationQuery || null,
        primaryCare: this.primaryCareQuery || '',
        accomodations: this.accomodationsQuery || '',
        newPatients: this.newPatientsQuery || ''
    });

}

标签： javascriptangularformsangular-reactive-forms

javascript - 如何使我的 formGroup 默认返回 [ngValue]="null"？

问题描述

解决方案

推荐阅读