Angular 用反应式表单绑定数组数据

在学习时，我被一个问题困住了

我有一个表单，它使用了反应式方法

我有一个数组“models”和每个“model”的“price”

我希望当我选择“模型”时，它应该给我它的“价格”，当我验证表单时，我在console.log（this.form.value）中收到所选模型及其价格

这是我的HTML:

 <form [formGroup]="factureForm" (ngSubmit)="onSubmitForm()">
  <select formControlName="model">
    <option *ngFor="let model of models">{{ model.model }}</option>
  </select>
  <select formControlName="price">
    <option *ngFor="let model of models">{{ model.price }}</option>
  </select>
  <button type="submit">Submit</button>
</form>

我迷路了。

---

提前谢谢：）

我想

[ngValue]

不见了

<form [formGroup]="factureForm" (ngSubmit)="onSubmitForm()">
  <select formControlName="model">
    <option *ngFor="let model of models" [ngValue]="model.model">{{ model.model }}</option>
  </select>
  <select formControlName="price">
    <option *ngFor="let model of models" [ngValue]="model.price">{{ model.price }}</option>
  </select>
  <button type="submit">Submit</button>
</form>

{{model.model}}
{{model.price}}
提交
我想
[ngValue]
不见了

<form [formGroup]="factureForm" (ngSubmit)="onSubmitForm()">
  <select formControlName="model">
    <option *ngFor="let model of models" [ngValue]="model.model">{{ model.model }}</option>
  </select>
  <select formControlName="price">
    <option *ngFor="let model of models" [ngValue]="model.price">{{ model.price }}</option>
  </select>
  <button type="submit">Submit</button>
</form>


{{model.model}}
{{model.price}}
提交
由于您需要在更改型号时更改价格，您可能需要在型号更改时设置价格。而且你也不需要价格下拉列表，因为它取决于型号

<form [formGroup]="factureForm" (ngSubmit)="onSubmitForm()">
  <select formControlName="model">
    <option value=''>Select</option>
    <option *ngFor="let model of models">{{model.model}}</option>
  </select>
  <input type="text" formControlName="price">
  <button type="submit">Submit</button>
</form>

initFactureForm() {
  this.factureForm = this.formBuilder.group({
    model: [""],
    price: [""],
  });

  // Look for changes to the model form-control
  this.factureForm.get('model').valueChanges.subscribe(newValue => {
    // newValue will be holding the 'model' attribute of the selected model
    // Searching the models array for the item with the selected model name
    const selectedModel = this.models.find(item => item.model === newValue);
    // If the item is found in the array,
    // then set the price of the model item to the price form-control.
    // If not found, set price to ''
    if (selectedModel) {
      this.factureForm.get('price').setValue(selectedModel.price);
    } else {
      this.factureForm.get('price').setValue('');
    }
  });
}


挑选
{{model.model}
提交
初始工厂形式（）{
this.factureForm=this.formBuilder.group({
型号：[“”]，
价格：[“”]，
});
//查找对模型表单控件的更改
this.factureForm.get（'model'）.valueChanges.subscribe（newValue=>{
//newValue将保留所选模型的“model”属性
//在模型数组中搜索具有选定模型名称的项
const selectedModel=this.models.find（item=>item.model==newValue）；
//如果在数组中找到该项，
//然后将模型项的价格设置为价格表单控件。
//如果未找到，请将价格设置为“”
if（selectedModel）{
this.factureForm.get（'price'）.setValue（selectedModel.price）；
}否则{
此.factureForm.get（'price'）.setValue（''）；
}
});
}
由于您需要在更改型号时更改价格，您可能需要在型号更改时设置价格。而且你也不需要价格下拉列表，因为它取决于型号

<form [formGroup]="factureForm" (ngSubmit)="onSubmitForm()">
  <select formControlName="model">
    <option value=''>Select</option>
    <option *ngFor="let model of models">{{model.model}}</option>
  </select>
  <input type="text" formControlName="price">
  <button type="submit">Submit</button>
</form>

initFactureForm() {
  this.factureForm = this.formBuilder.group({
    model: [""],
    price: [""],
  });

  // Look for changes to the model form-control
  this.factureForm.get('model').valueChanges.subscribe(newValue => {
    // newValue will be holding the 'model' attribute of the selected model
    // Searching the models array for the item with the selected model name
    const selectedModel = this.models.find(item => item.model === newValue);
    // If the item is found in the array,
    // then set the price of the model item to the price form-control.
    // If not found, set price to ''
    if (selectedModel) {
      this.factureForm.get('price').setValue(selectedModel.price);
    } else {
      this.factureForm.get('price').setValue('');
    }
  });
}


挑选
{{model.model}
提交
初始工厂形式（）{
this.factureForm=this.formBuilder.group({
型号：[“”]，
价格：[“”]，
});
//查找对模型表单控件的更改
this.factureForm.get（'model'）.valueChanges.subscribe（newValue=>{
//newValue将保留所选模型的“model”属性
//在模型数组中搜索具有选定模型名称的项
const selectedModel=this.models.find（item=>item.model==newValue）；
//如果在数组中找到该项，
//然后将模型项的价格设置为价格表单控件。
//如果未找到，请将价格设置为“”
if（selectedModel）{
this.factureForm.get（'price'）.setValue（selectedModel.price）；
}否则{
此.factureForm.get（'price'）.setValue（''）；
}
});
}
它正在工作！你能解释一下你在TS文件中使用的方法吗（item=>item.model==newValue）？非常感谢您的帮助：）我在代码中添加了一些注释。看看这是否有帮助。如果还有什么不清楚的，请告诉我。它正在工作！你能解释一下你在TS文件中使用的方法吗（item=>item.model==newValue）？非常感谢您的帮助：）我在代码中添加了一些注释。看看这是否有帮助。如果还有什么不清楚的地方，请告诉我。谢谢你的帮助，我试过了，但不是我想要的：）我想在更换型号时改变价格：）再次感谢你，我在@Nayak solution中找到了感谢你的帮助，我试过了，但这不是我想要的：）我想改变型号的价格：）再次感谢你，我在@Nayak solution的