Question

我创建了一个基本模型，该模型在某些其他表单组中很常见。

export class BaseResource {
    isActive: FormControl;
    number: FormControl;
    name: FormControl;
    type: FormControl;

    constructor(
        {
            number = null,
            name = null,
            type = null,
            isActive = true
        }: BaseResourceInterface
    ) {
        this.number = new FormControl(number);
        this.name = new FormControl(name);
        this.type = new FormControl(type);
        this.isActive = new FormControl(isActive);
    }
}

我希望这些类具有灵活性，以便可以通过this.formBuilder.group(new LocationResource())创建新的FormGroup填充或为空。

export class LocationResource extends BaseResource {
    cabinetType: FormControl;
    serviceLevel: FormControl;
    sanitaryStandard: FormControl;
    patientsAmount: FormControl;
    bedAmount: FormControl;
    workPlaceType: FormControl;
    building: FormControl;
    floor: FormControl;
    totalArea: FormControl;
    effectiveArea: FormControl;
    contacts: FormControl;

    constructor(
        {
            cabinetType,
            serviceLevel,
            sanitaryStandard,
            patientsAmount,
            bedAmount,
            workPlaceType,
            building,
            floor,
            totalArea,
            effectiveArea,
            contacts,
            ...baseProps
        }: LocationResourceInterface = {
            cabinetType: null,
            serviceLevel: null,
            sanitaryStandard: null,
            patientsAmount: null,
            bedAmount: null,
            workPlaceType: null,
            building: null,
            floor: null,
            totalArea: null,
            effectiveArea: null,
            contacts: null,
            name: null,
            number: null,
            type: null,
            isActive: null
        }
    ) {
        super(baseProps);

        this.cabinetType = new FormControl(cabinetType);
        this.serviceLevel = new FormControl(serviceLevel);
        this.sanitaryStandard = new FormControl(sanitaryStandard);
        this.patientsAmount = new FormControl(patientsAmount);
        this.bedAmount = new FormControl(bedAmount);
        this.workPlaceType = new FormControl(workPlaceType);
        this.building = new FormControl(building);
        this.floor = new FormControl(floor);
        this.totalArea = new FormControl(totalArea);
        this.effectiveArea = new FormControl(effectiveArea);
        this.contacts = new FormControl(contacts);
    }
}

我想有一种定义初始值的更优雅的方法，这就是我要的。

我尝试省略BaseResource的值（因为它们在其类中具有初始值），但是TypeScript在起作用时会抛出错误。

Answer 1

找到了我的问题here的答案。现在我的课看起来就是这样

export class LocationResource extends BaseResource {
    cabinetType: FormControl;
    serviceLevel: FormControl;
    sanitaryStandard: FormControl;
    workersAmount: FormControl;
    bedAmount: FormControl;
    workPlaceType: FormControl;
    building: FormControl;
    floor: FormControl;
    totalArea: FormControl;
    effectiveArea: FormControl;
    contacts: FormControl;

    constructor(
        {
            cabinetType = null,
            serviceLevel = null,
            sanitaryStandard = null,
            workersAmount = null,
            bedAmount = null,
            workPlaceType = null,
            building = null,
            floor = null,
            totalArea = null,
            effectiveArea = null,
            contacts = null,
            ...baseProps
        }: LocationResourceInterface = {}
    ) {
        super(baseProps);

        this.cabinetType = new FormControl(cabinetType);
        this.serviceLevel = new FormControl(serviceLevel);
        this.sanitaryStandard = new FormControl(sanitaryStandard);
        this.workersAmount = new FormControl(workersAmount);
        this.bedAmount = new FormControl(bedAmount);
        this.workPlaceType = new FormControl(workPlaceType);
        this.building = new FormControl(building);
        this.floor = new FormControl(floor);
        this.totalArea = new FormControl(totalArea);
        this.effectiveArea = new FormControl(effectiveArea);
        this.contacts = new FormControl(contacts);
    }
}

接口中的所有属性都标记为可选。

TypeScript扩展Angular FormGroup模型

1 个答案: