我可以将对象发送到反应形式吗?
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);
请问是否可以将整个对象发送到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);