Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/445.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 表单数组上的面片值未设置材质多选上的值_Javascript_Angular_Angular Material_Angular Reactive Forms - Fatal编程技术网

Javascript 表单数组上的面片值未设置材质多选上的值

Javascript 表单数组上的面片值未设置材质多选上的值,javascript,angular,angular-material,angular-reactive-forms,Javascript,Angular,Angular Material,Angular Reactive Forms,我正在尝试将Firestore中的ID数组修补到具有多个选项的mat select中。我在数组中循环,为每个id创建一个新的表单控件,然后使用反应式表单推送方法添加到formArray中。像这样: patchValueForm(portfolio: any) { this.formGroup.patchValue(portfolio); for (const id of portfolio.property_ids) { const control = new FormControl

我正在尝试将Firestore中的ID数组修补到具有多个选项的mat select中。我在数组中循环,为每个id创建一个新的表单控件,然后使用反应式表单推送方法添加到formArray中。像这样:

patchValueForm(portfolio: any) {
 this.formGroup.patchValue(portfolio);

 for (const id of portfolio.property_ids) {
   const control = new FormControl(id);
   if (!this.property_ids.getRawValue().includes(id)) {
     this.property_ids.push(control);
   }
}
console.log(this.formGroup.getRawValue()); }
这似乎将值修补到了控制台日志中显示的表单中:

我遇到的问题是,它没有预先填充此处显示的材质选择:

我在本部分中使用的HTML是:

 <mat-form-field appearance="outline">
          <mat-select [formArrayName]="'property_ids'" multiple>
            <mat-option *ngFor="let property of properties; let i = index" 
                        (onSelectionChange)="updatePropertyIdArray(property.property_id)" >
              {{property?.address?.first_line_address}}
            </mat-option>
          </mat-select>
          <mat-error>Please select at least one property</mat-error>
        </mat-form-field>

我在网上到处搜索,尝试了多种不同的方法,但似乎仍然无法填充select。以前有人经历过这种情况吗?

我只想使用一个简单的formControl,而不是mat select中的formArray。formControl保存选择数组,u可以使用formControlName

 <mat-form-field appearance="outline">
      <mat-select [formControlName]="'property_ids'" multiple>
        <mat-option *ngFor="let property of properties; let i = index" [value]="property.property_id" 
                    (onSelectionChange)="updatePropertyIdArray(property.property_id)" >
          {{property?.address?.first_line_address}}
        </mat-option>
      </mat-select>
      <mat-error>Please select at least one property</mat-error>
    </mat-form-field>

您还需要mat选项中的值绑定,以使select正常工作。

我只需要使用一个简单的formControl,而不是mat select中的formArray。formControl保存选择数组,u可以使用formControlName

 <mat-form-field appearance="outline">
      <mat-select [formControlName]="'property_ids'" multiple>
        <mat-option *ngFor="let property of properties; let i = index" [value]="property.property_id" 
                    (onSelectionChange)="updatePropertyIdArray(property.property_id)" >
          {{property?.address?.first_line_address}}
        </mat-option>
      </mat-select>
      <mat-error>Please select at least one property</mat-error>
    </mat-form-field>

您还需要mat选项中的值绑定,以使选择正常工作。

它可以类似于此。它可以类似于此。很抱歉,我想我遗漏了一些东西,您可以演示如何使用带有数组值的formControl吗?@Jm3s formControl可以保存任何对象和数组之类的值。你可以创建一个像new formControl[]或new FormGroup{properties:[]}这样的formControl。对不起,我想我遗漏了一些东西,你能演示一下如何使用数组值的formControl吗?@Jm3s formControl可以保存任何像对象和数组这样的值。您可以创建像new formControl[]或new FormGroup{properties:[]这样的formControl