1

我有一个 Angular 表单，其中包含用于填写项目详细信息的 md-option 下拉列表。其中一个下拉列表是城市列表，它根据所选的州/地区生成。当用户在新创建的项目上单击保存 (Save()) 时，页面将路由到 project/[projectID] 页面。当它这样做时，“城市”下拉值将从用户选择的内容切换到列表中的第一个值。当用户修改现有项目并保存时，它不会这样做，因为表单不需要重新路由。关于为什么会发生这种情况的任何想法？

我确定以下信息还不够；请让我知道您可能还需要什么。非常感谢。

项目详细信息.component.html：

          <!--City Dropdown-->
          <md-select id="cityId" class="mdl-cell mdl-cell--6-col mdl-textfield"
              key="cityId" placeholder="Select city" label="City*"
              formControlName="cityId" error="You must select a city." required (ngModelChange)="onSelectCity($event)">
              <md-option *ngFor="let city of cities" [value]="city.id">
                {{ city.name }}
              </md-option>
          </md-select>

项目详细信息.component.ts

初始化表单（）：

 {

        this.myForm = this.FormBuilder.group({
            .....
            cityId              : [null, [<any>Validators.required, validateDropdown]],
            ......
        });

更新表单（）：

updateForm() {
        // existing project
        if (!this.newProject) {
....
// Find the project's Country,Region,City,Labortype,AssemblyType in the loaded dropdown values
            let selectedCountry = this.countries.find(country => country.id === this.model.countryId);
            let selectedRegion = this.regions.find(r => r.id === this.model.regionId);
            let selectedCity = this.cities.find(ct => ct.id === this.model.cityId);
            console.log('SelectedCity: ', selectedCity.name);
....
}
}

获取城市（）

 getCities(regionId: string) {
        return this.locationService.getCities(regionId).then(cities => {
            if (cities && cities.length > 0) {
                this.cities = cities;
                setTimeout(() => { this.myForm.controls['cityId'].setValue(cities[0].id); }, 0);
            }
        });
    }

节省（）

 save(model: any, isValid: boolean) {
        console.log('SAVE FUNCTION');
        if (!isValid) {
            console.warn('not valid!');
            return;
        }
        this.submitted = true; // set form submit to true

        // check if model is valid
        // if valid, call API to save project
        console.log(model, isValid);
        let fields = this.myForm.value;
        if (this.newProject) {

            // this.model.name = fields['projectName'];
            this.projectService.createProject(fields).then(
                (newData) => {
                    console.log('New Project Created!', newData);
                    // this.projectService.getLiveProjects();
                    // Open a toast
                    this.mdlSnackbarService.showToast('Project Created');

                    // Reset form fields to show no changes
                    this.myForm.markAsPristine();
                    this.myForm.markAsUntouched();


                    // redirect to Edit Project page for this project
                    // overwrite the route history for the 'new project'
                    this.router.navigate(['/projects', newData.id], { replaceUrl: true });
                    console.log('Navigating to /projects/ProjectID URL')
                }, (error) => {
                    this.mdlDialogService.alert('Failed to create project');
                });
        } else {
            this.projectService.updateProject(fields, this.model.id).then(
                (newData) => {
                    console.log('Project Updated!', newData);
                    // this.projectService.getLiveProjects();
                    // Open a toast
                    this.mdlSnackbarService.showToast('Project Updated!');

                    // Reset form fields to show no changes
                    this.myForm.markAsPristine();
                    this.myForm.markAsUntouched();

                    // redirect to Edit Project page for this project
                    this.router.navigate(['/projects', newData.id]);
                }, (error) => {
                    this.mdlDialogService.alert('Failed to update project');
                });
        }
    }

项目.model.ts

// the shared project model class
import { EntityData } from '../../shared/models/entity-data.model';
import { IProjectData } from '@app/interfaces';

export class Project extends EntityData {
    ....
    public countryId: string;
    public countryName?: string | undefined;
    public regionId: string;
    public regionName?: string | undefined;
    public cityId: string;
    public cityName?: string | undefined;
    ....

    constructor(data?: IProjectData) {
        super(data);
        if (data) {
            ....
            this.countryId = data.countryId;
            this.countryName = data.country && data.country.name;
            this.regionId = data.regionId;
            this.regionName = data.region && data.region.name;
            this.cityId = data.cityId;
            this.cityName = data.city && data.city.name;
            ....

        }

    }

}
4

0 回答 0