将反应形式值转换为模型对象答案

【问题标题】：Convert Reactive Forms Value Into Model Object将反应形式值转换为模型对象
【发布时间】：2019-06-18 05:51:55
【问题描述】：

我正在使用Reactive Forms，我想将formGroup 的值转换为模型类对象。请给我一些解决方案。而且我只想发送password 字段而不是confirmPasword。我还提到了我的模型类。

服务.ts

objRegisterModel: RegisterModel = new RegisterModel();
constructor(private fb: FormBuilder, private http: HttpClient) {}
formModel = this.fb.group({
    FirstName: ['', Validators.required],
    LastName: ['', Validators.required],
    Emails: this.fb.group({
      EmailID: ['', [Validators.required, Validators.email]],
      ConfirmEmail: ['', Validators.required]
    }, { validator: this.compareEmails }),
    OrgName: ['', Validators.required],
    OrganizationType: ['', Validators.required],
    City: ['', Validators.required],
    PhoneNo: ['', Validators.required],
    PostalAddress: ['', Validators.required],
    Passwords: this.fb.group({
      Pwd: ['', Validators.required],
      ConfirmPassword: ['', [Validators.required]]
    }, { validator: this.comparePasswords })
  });

模型类

export class RegisterModel {
    Active: number;
    Address: string;
    Amt: number;
    CityID: number;
    Country: string;
    EmailID: string;
    FullName: string;
    ID: number;
    PhoneNo: string;
    PostalAddress: string;
    Pwd: string;
    constructor(init?: Partial<RegisterModel>) {
        Object.assign(this,init);
       }
}

【问题讨论】：

标签： angular typescript angular-reactive-forms

【解决方案1】：

就这么简单：

objRegisterModel: RegisterModel = this.formModel.value

投票对您最有帮助的答案！如果这些答案对你有帮助

【讨论】：

【解决方案2】：

首先，我建议您不要使用类来定义RegisterModel，而是使用接口。

export interface RegisterModel {
  Active: number;
  Address: string;
  Amt: number;
  CityID: number;
  Country: string;
  EmailID: string;
  FullName: string;
  ID: number;
  PhoneNo: string;
  PostalAddress: string;
  Pwd: string;
}

在您需要上述接口的组件/服务上，我们首先初始化objRegisterModel 属性。

objRegisterModel: RegisterModel = {} as RegisterModel;

要获取您的反应式表单FormGroup 的值，您可以这样做：

this.formModel.value

如果您只想获取密码，并且我假设您指的是Pwd 属性，

this.formModel.Passwords.Pwd

【讨论】：

请查看型号类
@WebMaster 谢谢。关于您的RegisterModel，Active、Address 等属性的值从何而来？我似乎在 FormGroup 上找不到对应的匹配表单控件
可以，但它应该设置那些与模型属性完全相同的值，@wentjun
@WebMaster 是的，我知道，但是您的反应表单上没有 Active Address Amt cityId？
我从模型类中删除了所有额外的属性并重试，但它的行为是相同的。

【解决方案3】：

好吧，您的模型类没有表单中的所有字段。我认为这是您的错误，您应该在模型中添加所有字段，然后制作并使用一些映射函数，例如

mapping(group: FormGroup){
Object.keys(group.control).forEach(key =>{
const abstractControl = group.get(key);
if(abstractControl && abstractControl instanceof FormGroup){
//call recursively
mapping(abstractControl);
}
else{
if(key !== 'ConfirmPassword')
this.objRegisterModel[key] = abstractControl.value;
}
}//end of forEach
}//end of func

现在你只需要调用这个函数传递FormGroup的对象。希望对你有帮助

【讨论】：