Question

我想问一下是否有可能将整个对象发送到角度为2的反应形式。

这是我的表格：

this.parameterForm = this.fb.group({

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

第三个属性（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和通过服务我得到对象，但这个解决方案不是很好。您知道我可以将对象传递给表单吗？

由于

Answer 1

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

Answer 2

您有几种选择：

我们说我有以下形式：

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
};

或将表单用作界面中的Object（例如@Output）：

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

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

this.randomOutput.emit(data);

我可以将对象发送到被动表单吗？

2 个答案: