我想使用 mat-select 的值作为键，输入字段的值作为 angular 反应形式中该键的值

Question

这是我的UI

https://i.stack.imgur.com/NlBNA.png

我想要这样的表单值 {color :"red"} 其中 **mat-selects value is color** and **input field is red**. When I will change mat-selects 值表示颜色也将更改的键。

假设我将 mat-select 的值从颜色更改为存储。

My OutPut should be {storage:"red"}

假设我将输入字段的值从红色更改为“250Gb”。

My OutPut should be {storage:"250Gb"}

如何最好地解决这个问题possible.Thanks求助

我的HTML:

<form [formGroup]="itemEntryForm" (submit)="onSaveitem()">
  <div> 
                <mat-form-field appearance="outline" class="full-width-input">  
                    <mat-label >Attribute  :</mat-label>
                    <mat-select>
                    <mat-option  *ngFor="let attribute of attributes" [value]="attribute.name">{{ attribute.name }}</mat-option>
                    
                </mat-select>
               
                  <mat-label><mat-icon>branding_watermark</mat-icon> <b>*Attribute </b> <i> label</i></mat-label>
          
                </mat-form-field>  
              </div>
              <div> 
                <mat-form-field class="full-width-input">
                <mat-label >Attribute Value :</mat-label>
                <input matInput name="item_attribute" placeholder="Color ,Storage" formControlName="item_attribute">
                <mat-error *ngIf="itemEntryForm.get('item_attribute').invalid">Attribute</mat-error>
                </mat-form-field>
            </div>
            <div> 
</form>

我的 Ts 文件:

export class ItemEntryComponent implements OnInit {
  itemEntryForm:FormGroup;


  taxes = [{name:"tax"},{name:"tax2"}]
 
  constructor(private _formbuilder:FormBuilder) { }

  ngOnInit(): void {
    this.itemEntryForm=this._formbuilder.group({
      type           :     ['Goods'], 
      item_name      :     ['',Validators.required],
      description    :     ['',Validators.required],
      unit           :     ['pc',Validators.required],
      tax            :     ['',],
      manufacturer   :     ["",],   
      brand          :     ['',],
      item_attribute :     ['',],
      item_attribute2:     ['',],
    
      image          :     ['',],

    })
  }

  
  onSaveitem(){
    console.log( this.itemEntryForm.value)
  }

  
}

Answer 1

正在尝试设置下拉菜单的订阅以获取它的价值。可作为窗体控件的键。

setFormSubscription() {
   this.itemEntryForm.controls.X.valueChanges.subscribe(new_X_Value => {
      if (new_X_)Value && new_X_)Value.value) {
        // new_X_)Value.value is because of considering it as dropdown.
        if (!this.itemEntryForm.get(new_X_)Value.value)) { // if it's not already added.
          this.itemEntryForm.addControl(new_X_)Value.value, new FormControl(''))
        }
     }
  })

  this.itemEntryForm.controls.Y.valueChanges.subscribe(new_Y_Value => {
    if (this.itemEntryForm.get(NAME_OF_X_CONTROL)) {
      this.itemEntryForm.get(NAME_OF_X_CONTROL).setValue(new_Y_Value);
      // Here you need to make sure X Control exists
      // To get Name of X Control, you can use list which is used for dropdown. 
    }
  })
}

在创建表单后立即调用 setFormSubscription 函数。

更改值检查后，调用onSaveitem函数检查值。

我想使用 mat-select 的值作为键，输入字段的值作为 angular 反应形式中该键的值

i want to use mat-select`s value as key and input field`s value as the value of that key in angular reactive form

forms

angular-material

angular

angular-reactive-forms