我花了最后幾個小時在我的表單中以 13 角填充下拉串列，最后我設法使它作業，盡管填充下拉串列的代碼沒有問題，但其他控制元件破壞了我的下拉串列：
例如：
@Component({
selector: 'app-company-add',
templateUrl: './company-add.component.html',
styleUrls: ['./company-add.component.css']
})
export class CompanyAddComponent implements OnInit {
currencies: Currency[] = [];
form = new FormGroup({
name: new FormControl('',[Validators.required]),
currency: new FormControl('', Validators.required),
address: new FormGroup({
street: new FormControl('',[Validators.required]),
city: new FormControl('',[Validators.required]),
country: new FormControl('',[Validators.required]),
})
});
constructor( public companyService: CompanyService, public currencyService: CurrencyService,
private router: Router) {
}
ngOnInit() {
this.currencyService.getAll().subscribe((data: Currency[])=>{
this.currencies = data;
console.log(this.currencies);
})
}
get f(){
return this.form.controls;
}
submit(){
console.log(this.form.value);
this.companyService.create(this.form.value).subscribe((res:any) => {
console.log(res);
console.log('Post created successfully!');
this.router.navigateByUrl('details');
})
}
}
<form [formGroup]="form" (ngSubmit)="submit()">
<div >
<div >
<h2>Add new company</h2>
<label for="name">Name:</label>
<input formControlName="name" id="name" type="text" style="width: auto;">
<div *ngIf="f['name'].touched && f['name'].invalid" >Name is requiered.
<div *ngIf="f['name'].errors && f['name'].errors['required']">Name is requiered.</div>
</div>
<label for="currency">Currency:</label>
<select formControlName="currency" >
<option disabled>Select Currency</option>
<option>Choose Currency</option>
<option *ngFor="let currency of currencies">{{currency.name}}</option>
</select>
</div>
<div >
<div formGroupName="address">
<h2>Address</h2>
<label for="street">Street:</label>
<input formControlName="street" id="street" type="text" style="width: auto;">
<div *ngIf="f['street'].touched && f['street'].invalid" >
Street is
required.
<div *ngIf="f['street'].errors && f['street'].errors['required']">Street is
required.</div>
</div>
<label for="city">City:</label>
<input formControlName="city" id="city" type="text" style="width: auto;">
<div *ngIf="f['city'].touched && f['city'].invalid" >
City is required.
<div *ngIf="f['city'].errors && f['city'].errors['required']">City is required.
</div>
</div>
<label for="zipCode">ZipCode:</label>
<input formControlName="zipCode" id="zipCode" type="text" style="width: auto;">
<div *ngIf="f['zipCode'].touched && f['zipCode'].invalid" >
ZipCode is required.
<div *ngIf="f['zipCode'].errors && f['zipCode'].errors['required']">ZipCode is
required.</div>
</div>
<label for="country">Country:</label>
<input formControlName="country" id="country" type="text" style="width: auto;">
<div *ngIf="f['country'].touched && f['country'].invalid" >
Country is required.
<div *ngIf="f['country'].errors && f['country'].errors['required']">Country is
required.</div>
</div>
</div>
</div>
</div>
<div >
<button type="submit" [disabled]="!form.valid">Submit</button>
當我的 formGroupName="address" 中有驗證器時，我的下拉串列是空白的
這打破了下拉：
<div *ngIf="f['street'].touched && f['street'].invalid" >
Street is
required.
<div *ngIf="f['street'].errors && f['street'].errors['required']">Street is
required.</div>
</div>
任何人都建議如何解決它，以便我可以在每個控制元件上都有驗證器？
uj5u.com熱心網友回復：
在您的示例中，f['street']是無效路徑，因為 street 不是form. 正確的記法是f['address'].controls['street']。
為了進一步改進，我建議你放棄get f()并使用內置的getter來訪問表單控制元件。這將允許您輕松訪問嵌套控制元件，例如form.get('address.street')或form.get('address.city').
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/497721.html