角反应式：填充编辑表单的选择控件失败

Question

I am new to Angular and I have an edit form using Angular 4 reactive forms, trying to populate the select with department, the rule is the hospital is populated from the user.hospital, then a cascading dropdown department based on the hospital while the hospital is correctly displayed, the department fails.. in the console, the populated department is showing the departmentId correctly.

edit component:

    form = new FormGroup({
        hospital: new FormControl({ value: 'hospitalId', disabled: true }, Validators.required),
        department: new FormControl('', Validators.required)
);
    damaId: number;
    me: any;

    hospitals: any[];
    selectedHospital: any;
    departments: any[];
    availableDepartments: any[];
    selectedDepartment: any;
    user: string = '';



    constructor(private route: ActivatedRoute,
        private router: Router,
        private commonService: CommonService,
        private damaService: DamaService,
        private accountEndpoint: AccountEndpoint,
        private toastyService: ToastyService) {

        this.sub = this.route.params.subscribe(
            params => {
                let id = +params['id'];
                this.getDama(id);
            }
        );

        this.accountEndpoint.getUserEndpoint()
            .subscribe(response => {
                const me = response.json();
                this.dama.userId = me.id;
            });
    }

    ngOnInit() {
        const sources = [
            this.accountEndpoint.getUserEndpoint(),
            this.commonService.getHospitals(),
            this.commonService.getDepartments(),
            this.commonService.getApproves(),
        ];
        this.sub = this.route.params.subscribe(
            params => {
                let id = +params['id'];
                this.getDama(id);
            }
        );
        Observable.forkJoin(sources).subscribe(
            data => {
                const me = data[0].json();
                this.me = me;
                this.dama.userId = me.id;

                this.hospitals = data[1];
                this.departments = data[2];
                this.approves = data[3];

                this.initializeSelectedHospital();
                this.filterDepartments();
            },
            err => {
                if (err.status == 404)
                    this.router.navigate(['/damas']);
            });
    }

    ngOnDestroy(): void {
        this.sub.unsubscribe();
    }

    getDama(id: number): void {
        this.damaService.getDama(id)
            .subscribe(
            (dama: SaveDama) => this.onDamaRetrieved(dama),
            (error: any) => {
                if (error.status == 404)
                    this.router.navigate(['/damas'])
            });
    }

    onDamaRetrieved(dama: SaveDama): void {

        //Update the data on the form
        this.form.patchValue({
            hospital: this.dama.hospitalId,
            department: this.dama.departmentId,

        })
    }
    private initializeSelectedHospital() {
        this.selectedHospital = this.hospitals.find(h => h.id === this.me.hospitalId);
    }

    private filterDepartments() {
        this.availableDepartments = this.selectedHospital.departments;
    }


    public submit() {
        console.log(this.form);
        if (this.form.dirty) {
            //copy the form values over the dama object values
            let p = Object.assign({}, this.dama, this.form.value);
            this.damaService.update(p)
                .subscribe(x => {
                    x.toastyService.success({
                        title: 'Success',
                        msg: 'Form was sucessfully Updated.',
                        theme: 'bootstrap',
                        showClose: true,
                        timeout: 5000

the Html page:

                <form [formGroup]="form" (ngSubmit)="submit()">
                <div class="form-group">
                    <label for="hospital" hospital=""></label>
                    <select id="hospital" class="form-control" formControlName="hospital" [(ngModel)]="selectedHospital">
                        <option value="undefined">Select a hospital</option>
                        <option *ngFor="let h of hospitals" [ngValue]="h">{{ h.name }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="department">Department:</label>
                    <select id="department" class="form-control" formControlName="department" [disabled]="!availableDepartments" [(ngModel)]="selectedDepartment">
                        <option value="undefined" disabled>
                            Select a department
                            <span *ngIf="selectedHospital">from "{{selectedHospital?.name}}"</span>
                        </option>
                        <option *ngFor="let d of availableDepartments" [ngValue]="d">{{d.name}}</option>
                    </select>
                    <div *ngIf="form.get('department').touched && form.get('department').invalid" class="alert alert-danger">Department is required....</div>
                </div>

the SaveDama model

 export class SaveDama {
    id: number;
    departmentId: number;
    hospitalId: number;
    damaNumb: number;
    totalDisch: number;
    damaDt: string;
    dataEntryTime: string;
    latestUpdate: string;
    on: string;
    approvedOn: string;
    approveId: number;
    notes: string;
    userId: string;

}

I appreciate you help.....

Answer 1

The function is simplified with following code:

    function invalidDama(input: FormControl) {

   if (!input.value) {
       return null;
   }

   const goodNumb = input.value.damaNumb < input.value;
   return goodNumb ? null : { badNumb: true };
}

and the validation div

 <div *ngIf="form.get('totalDisch').errors.invalidDama">Discharges can not be less than DAMA....</div>