我已经开发了一个月的应用程序。我遇到了许多问题,几乎所有问题我都找到了解决方法,而不是打开线程,但是仍然有一个设计问题我还没有弄清楚。
假设我有一个名为MonkeyComponent的小组件,它只有一个用于我的模型的表单(猴子)
export class Car {
model: string
}
export class Monkey {
// If doc contains 8 digits
driversLicense?: string;
// If doc contains 13 digits
pubId?: string;
name: string;
age: number;
car: Car; // another model (could be added to form later)
}
export class AppComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder, private store: MonkeyStore) {
this.formGroup = this.fb.group({
name: [''],
doc: [''],
age: [''],
});
}
save() {
// now I need to map my form value to my monkey model
// but they are mismatched (because doc can be used to populate
// either pubId or driversLicense)
}
}
此表单映射在我的项目的许多模型中都很常见(表单的一个字段代表模型中的另一个字段)
我也无法创建多个字段(客户要求)
您将如何创建此映射?我愿意接受设计建议(如果您有更好的选择,则不需要课程模型)
有反应的方式吗?
是否可以不必不必使用Object.assign然后手动映射不同的字段?
一个干净的解决方案是找到一种实现this.formGroup.value
的方式
{
pubId: '1234567890123',
name: 'Miwalkey',
age: 12,
}
或
{
driversLicense: '12345678',
name: 'Miwalkey',
age: 12,
}
取决于文档的值(长度)。
答案 0 :(得分:2)
我认为这是设计方法:
ngOnInit() {
this.formGroup.valueChanges.subscribe(val => {
if (val.doc.length === 13) {
monkey.pubId = val.doc;
} else {
monkey.driversLicense = val.doc;
}
});
}
或者您可以
this.formGroup.get('doc').valueChanges.subscribe(val => {
if (val.length === 13) {
monkey.pubId = val;
} else {
monkey.driversLicense = val;
}
});
如果您使用的是ngModel,也可以将相同的逻辑放入(ngModelChange)
回调中。
答案 1 :(得分:-1)
我当前的解决方案是这个(我觉得这很丑)
基本表单模型
export class FormModel {
constructor(input?: any) {
if (input) {
this.fromJSON(input);
}
}
fromJSON(input: any): this {
return Object.assign(this, input);
}
}
汽车(型号)
export class Car extends FormModel {
model: string;
}
猴子(模型)
export class Monkey extends FormModel {
pubId?: string;
driversLicense?: string;
car: Car;
name: string;
age: number;
fromJSON(input: any): this {
super.fromJSON(input);
this.setDoc(input.doc);
this.car = new Car(input.car);
return this;
}
setDoc(doc: string) {
if (doc.length === 8) {
this.driversLicense = doc;
} else if (doc.length === 13) {
this.pubId = doc;
}
delete this['doc'];
}
}
MonkeyComponent
export class MonkeyComponent {
formGroup: FormGroup;
constructor(private fb: FormBuilder, private store: MonkeyStore) {
this.formGroup = this.fb.group({
name: [''],
doc: [''],
age: [''],
});
}
save() {
const monkey = new Monkey(this.formGroup.value);
console.log(monkey );
}
}