如何使我的窗体组默认返回[ngvalue]=“null”?

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

当用户导航回页面时,这些值会通过我的ngoninit()中的route.snapshot.queryparammap.get()再次出现,这就是我想要的。但是,如果用户跳过任何选择输入而不是显示默认值,则选择输入将显示为空。我所期望的是默认值再次出现。我可以通过控制台记录providerform对象看到它返回了我所期望的所有内容,但它看起来不像null绑定回了[ngvalue]我如何解决这个问题?

以下是相关代码。my[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>

//component.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 || ''
    });

}