我有這個輸入輸入 img并且我想像在這個示例陣列示例中的陣列一樣發送它我們如何使用表單陣列來解決這個問題。
我有這個輸入
<div>
<mat-form-field class='social-input lg:social-input-lg mt-8'>
<input matInput type='text' placeholder="Instagram URL">
</mat-form-field>
<mat-form-field class='social-input lg:social-input-lg mt-8'>
<input matInput type='text' placeholder="facebook URL">
</mat-form-field>
<mat-form-field class='social-input lg:social-input-lg'>
<input matInput type='text' placeholder="Linkedin URL">
</mat-form-field>
</div>
uj5u.com熱心網友回復：
export class AppComponent {
constructor(private fb: FormBuilder) {}
socForm: FormGroup = this.fb.group({
instagram: ["", []],
facebook: ["", []],
linkedin: ["", []]
});
ngOnInit() {
this.socForm.valueChanges
.pipe(
map((formVal: { instagram: string; facebook: string; linkedin: string }) => {
return Object.entries(formVal).reduce((accu, [fK, fV]) => {
return [...accu, { type: fK, url: fV }];
}, []);
})
)
.subscribe(console.log);
}
}
https://codesandbox.io/embed/focused-wilbur-f4hvm?fontsize=14&hidenavigation=1&module=/src/app/app.component.ts&theme=light
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339959.html