我可以将对象发送到反应形式吗?

Can i send a object to a reactive form?

请问是否可以将整个对象发送到angular中的反应形式 2.

这是我的表格:

this.parameterForm = this.fb.group({

  'name': ['', Validators.required],
  'description': "",
  'parameterType':''
});

第三个属性(parameterType)应该是一个对象。 (名称和描述只是纯字符串。

我的HTML参数类型是(formControlName是用来映射的):

<label for="parameterType">Parameter Type</label>
<select id="parameterType" class="form-control" formControlName="parameterType">
  <option *ngFor="let parameterType of parameterTypes" [value]="parameterType">
    {{parameterType.name}}
  </option>

</select>

select 中的值是对象(在别处创建)。提交表单时,我希望有 parameterType 对象。提交正在尝试将表单解析为名为 Parameter:

的对象
export class Parameter {

  public id: number;
  public name: string;
  public description: string;

  public parameterType? : ParameterType
} 

但是当我试图在控制台中读取结果时,parameterType 只包含一个字符串“[Object object]”,看起来 parameterType 只是一个 String 并且在提交表单时,对象被转换为一个简单的字符串。

我的提交功能是这样的:

  onSubmit( {parameter}:{parameter: Parameter} ) {
    console.log(parameter);
  }

现在我只是这样做,将 id 发送到 parameterType 中,并通过服务获得对象,但此解决方案不是很好。你知道我可以将对象传递给表单的任何方式吗?

谢谢

我认为您需要使用 [ngValue] 而不是 [value]。

您有多种选择:

假设我有以下形式:

user: FormGroup;

this.user = this.formBuilder.group({
  account: this.formBuilder.group({
    email: ['', [Validators.required, Validators.pattern(EmailRegex)]],
    password: ['', Validators.required],
    passwordConfirm: ['', Validators.required]
  }, { validator: this.matchingPasswords('password', 'passwordConfirm') })
});

从那里,您可以使用 Object 设置表单的值:

let user: SignUp = {
  account: {
    email: this.mail,
    password: '',
    passwordConfirm: ''
  }
};
this.user.setValue(user);

其中 Signup 是一个接口:

export interface SignUp {
  account: {
    email: string;
    password: string;
    passwordConfirm: string;
  }
}

您可以通过这种方式从您的表单创建一个新的 Object

let jsonResult = {
  email: this.user.value.account.email,
  password: this.user.value.account.password
};

或将表单用作界面中的对象(例如 @Output):

@Output() randomOutput= new EventEmitter<SignUp>();

let data: SignUp = Object.assign({}, this.user.value);

this.randomOutput.emit(data);