我正在嘗試制作一個表單來提交資料，然后用資料填充該表單以便在稍后階段對其進行編輯。該頁面可以是新頁面，但最好保留表單布局和驗證。
我已經嘗試對每個條目使用 [(ngModel)] ，該條目適用于除可以多個條目的汽車串列之外的所有內容。此方法還給我一條訊息，說它已被棄用，讓我認為這不是方法：
"It looks like you're using ngModel on the same form field as formControlName....."
附件是一個簡化頁面，顯示了我遇到的問題。如何使用 API 中的資料預填充輸入？
car.component.html
<div >
<mat-card>
<mat-card-content>
<form [formGroup]="formValues">
<p>
<mat-form-field style="padding-right: 10px;" >
<mat-label>Name</mat-label>
<input
matInput
placeholder="Seller name"
autocomplete="off"
formControlName="name"
>
<mat-icon matSuffix
matTooltip="[REQUIRED] Please input">info
</mat-icon>
</mat-form-field>
<mat-form-field >
<mat-label>Margin</mat-label>
<input
matInput
placeholder="Seller Margin..."
autocomplete="off"
formControlName="margin"
>
<mat-icon matSuffix
matTooltip="[REQUIRED] Please input">info
</mat-icon>
</mat-form-field>
</p>
<table formArrayName="cars">
<tr *ngFor="let _ of cars.controls; index as i; let first=first">
<ng-container [formGroupName]="i">
<td>
<mat-icon (click)="addRow()">add</mat-icon>
</td>
<td>
<mat-icon *ngIf="!first" (click)="removeRow(i)">remove</mat-icon>
</td>
<td >
<mat-form-field >
<mat-label>Model</mat-label>
<input
matInput
placeholder="Car model"
autocomplete="off"
formControlName="model"
>
<mat-icon matSuffix
matTooltip="[REQUIRED] Please input">info
</mat-icon>
</mat-form-field>
</td>
<td >
<mat-form-field >
<mat-label>State</mat-label>
<mat-select formControlName="state">
<mat-option value="new">new</mat-option>
<mat-option value="used">used</mat-option>
</mat-select>
<mat-icon matSuffix
matTooltip="[REQUIRED] Select it">info
</mat-icon>
</mat-form-field>
</td>
<td >
<mat-form-field >
<mat-label>Value</mat-label>
<input
matInput
placeholder="The value..."
autocomplete="off"
formControlName="value"
>
<mat-icon matSuffix
matTooltip="[REQUIRED] Some reminder">info
</mat-icon>
</mat-form-field>
</td>
</ng-container>
</tr>
</table>
</form>
</mat-card-content>
<mat-card-actions align="end">
<button mat-raised-button [disabled]="!formValues.valid" (click)="saveSeller()" color="primary">Save seller <i
>send</i></button>
</mat-card-actions>
<mat-card-footer style="margin: 1px;">
<i >create date here</i>
</mat-card-footer>
</mat-card>
</div>
car.component.ts
import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup, FormArray, Validators} from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-car',
templateUrl: './car.component.html',
styleUrls: ['./car.component.css']
})
export class CarComponent implements OnInit {
formValues = new FormGroup({
cars: new FormArray([
new FormGroup({
model: new FormControl('', [Validators.required]),
value: new FormControl('', [Validators.required]),
state: new FormControl('', [Validators.required])
})
]),
name: new FormControl('', [Validators.required]),
margin: new FormControl('', [Validators.required]),
create_date: new FormControl('')
});
cars = this.formValues.get('cars') as FormArray;
sellerIdFromRoute: any;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
const routeParams = this.route.snapshot.paramMap;
this.sellerIdFromRoute = String(routeParams.get('sellerId'));
this.getSeller(this.sellerIdFromRoute);
}
// Form
addRow() {
const group = new FormGroup({
model: new FormControl('', [Validators.required]),
value: new FormControl('', [Validators.required]),
state: new FormControl('', [Validators.required])
});
this.cars.push(group);
}
removeRow(i: number) {
this.cars.removeAt(i);
}
saveSeller(){
// POSTS TO API, THIS WORKS
alert('added/updated seller');
console.log(this.formValues.value);
}
getSeller(id) {
// This is an example response from my API
const example: Seller = {
_id: id,
name: 'Used Ford salesman',
margin: 22,
create_date: {
$date: '2022-05-20T19:45:22.715Z'
},
cars: [
{
model: 'Estate',
value: 12345,
state: 'new'
},
{
model: 'Saloon',
value: 12345,
state: 'used'
},
]
};
console.log(example);
return example;
}
}
export interface Cars {
model: string;
value: number;
state: string;
}
export interface Seller {
_id: string;
name: string;
margin: number;
create_date: any;
cars: Array<Cars>;
}
uj5u.com熱心網友回復：
正如 Angular 警告你的那樣，混合使用是一種不好的做法Template driven form，這會導致很多不需要的行為（你可以在官方 Angular 檔案Reactive form中獲得很多關于 Angular 表單的資訊）。
要使用反應式表單（您的情況）填充表單控制元件值，您必須在組件初始化時設定值。您可以同時設定所有 formGroup 值：
ngOnInit() {
...
this.formValues.setValue({
name: "Test",
margin: "5",
cars: [{ model: 'Mercedes', value: 'x', state: 'state'}],
create_date: "01/01/2022"
});
}
如果您不想初始化所有表單控制元件，請使用patchValue方法而不是此處。setValue
或者，也可以直接在 formControl 上設定值：
this.formValues.get('name')?.setValue('newName'); // or patchValue
就個人而言，我更喜歡在不同的領域分別管理 formControls，它為您提供了更多的靈活性和更多的控制權，以便充分利用反應式表單 api 的豐富性。
uj5u.com熱心網友回復：
不確定這是否是最好的方法，但最終使用了這個：
ngOnInit() {
const routeParams = this.route.snapshot.paramMap;
this.sellerIdFromRoute = String(routeParams.get('sellerId'));
const valuesFromAPI = this.getSeller(this.sellerIdFromRoute);
this.addCars(valuesFromAPI.cars);
this.formValues.patchValue({
name: valuesFromAPI.name,
margin: valuesFromAPI.margin,
create_date: valuesFromAPI.cars
});
}
addCars(cars: Cars[]) {
cars.forEach(car => {
const group = new FormGroup({
model: new FormControl(car.model, [Validators.required]),
value: new FormControl(car.value, [Validators.required]),
state: new FormControl(car.state, [Validators.required])
});
this.cars.push(group);
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/479666.html
上一篇：制作其他兩個組合的新陣列