Как я могу сделать мою группу по умолчанию обратно к [ngValue] = "null"?

Question

Я работаю с Reactive Forms в Angular 6. У меня есть FormGroup, в которой есть множество выбранных выпадающих входов.Каждый из них имеет значение по умолчанию, если пользователь еще ничего не выбрал.Эти входные данные не требуются, и пользователь может пропустить многие из них, если они неприменимы.После того, как пользователь сделает свой выбор и нажмет кнопку поиска, значения из выпадающих входов будут добавлены в URL через router.navigate ().

Когда пользователь переходит обратно на страницу, эти значения снова появляются через route.snapshot.queryParamMap.get () в моем ngOnInit (), что я и хочу.Однако если пользователь пропускает какой-либо из выбранных входов вместо отображения значения по умолчанию, выбранные входы отображаются пустыми.То, что я ожидал, было значением по умолчанию, чтобы появиться снова.Я могу видеть из консоли, регистрируя объект 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>

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

}

Answer 1

Вы присваиваете значение null в affiliation: this.affiliationQuery || null, но значение html-опции "null" в строке <option [ngValue]="null">Select Specialty</option>

Так что либо измените файл null to "null" in ts или "null" to null in html файл.

Answer 2

Я пытался воспроизвести его, и я получаю то же самое, когда пытаюсь найти «ноль» в <select>.Таким образом, нулевой тип строки.Однако, когда я присваиваю значение null (не строку), это работает.

В вашей консоли я вижу, что значения "null", как в строке типа.

Можете ли вы увидеть, работает ли это.

попробуйте присвоить null вместо "null"