Question

我正在Angular 6中使用Reactive Forms。我有一个FormGroup，它具有大量的select下拉输入。如果用户尚未选择任何选项，则每个选项都有一个默认值。这些输入不是必需的，如果不适用，用户可以跳过许多输入。用户做出选择并按下搜索按钮后，下拉输入中的值便会通过router.navigate（）添加到url中。

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

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

        Average Grades        
Jan        average grade:  5.5
Marie      average grade: 5.67
Kees       average grade:  7.5
André      average grade:  6.2
Antoinette average grade:  6.5
Jerôme     average grade:  7.0
Kamal      average grade: 7.75
Diana      average grade:    0
Petra      average grade: 6.25
Malika     average grade:  7.0
Samira     average grade:  6.8

Average Grade for Subject 1: 5.5

// component.ts

<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>

Answer 1

我试图重现它，当我尝试在<select>中匹配“ null”时，我得到了同样的东西。因此为字符串类型的null。但是，当我分配null（不是字符串）的值时，它将起作用。

我在您的控制台中看到字符串类型的值是“ null”。

您能看看是否可行。

尝试分配null而不是"null"

Answer 2

您正在null中分配值affiliation: this.affiliationQuery || null，但是您的html选项值是"null"，它在字符串<option [ngValue]="null">Select Specialty</option>中

因此，请更改null to "null" in ts文件或"null" to null in html文件。

如何将我的formGroup默认恢复为[ngValue] =“ null”？

2 个答案: