web-dev-qa-db-ja.com

angular）を使用して配列形式で値を設定する方法

このように配列に値を設定したい：

this.form.controls[name].setValue('name')

しかし、私は配列フォームを操作していますが、特定の配列フォームのインデックスを渡しても、これは機能しません

たとえば、これは私のフォーム配列であり、関数に値を設定することを実行したい

user: FormGroup;
  users: FormGroup;

  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.buildGroup();
    this.users = this.fb.group({
      data: this.fb.array([this.user])
    });
  }
  get fData() {
    return this.users.get('data') as FormArray;
  }
  buildGroup() {
    return this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
setValue(index) {
   this.fData[index].controls[name].setValue('name')
  }
  onSubmit() {
    this.fData.Push(this.buildGroup());
    const {valid, value} = this.fData;
    console.log(valid, value);
  }

しかし、this.fData [index] .controls [name] .setValue（ 'name'）これは機能していません

angularangular-reactive-forms
3
LLaza

配列の場合、setControlを使用する必要があります。このようなもの：

    this.productForm = this.fb.group({
        productName: ['', [Validators.required,
                           Validators.minLength(3),
                           Validators.maxLength(50)]],
        productCode: ['', Validators.required],
        starRating: ['', NumberValidators.range(1, 5)],
        tags: this.fb.array([]),
        description: ''
    });

    ...

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));
22
DeborahK

これは、formArrayの特定のフォームコントロールで手動で値を設定するために行ったことであり、私のために機能しました。 formArrayという名前のbundleDetailsがあります。

   this.formBuilderObj['bundleDetails'] = 
   this.formBuilder.array([this.createBundleItem()]);

    createBundleItem(): FormGroup {
    return this.formBuilder.group({
     bsku: ['', Validators.required],
     bqty: ['', Validators.required],
     bprice: ['', Validators.required]
    });
   }

Bskuコントロールの値を設定するメソッド（ここで、インデックスは[formGroupName]="i" htmlファイルから渡されます）。

   setSku(sku: string, index: number) {
   const faControl = 
   (<FormArray>this.pmForm.controls['bundleDetails']).at(index);
   faControl['controls'].bsku.setValue(sku);
  }

お役に立てれば。ハッピーコーディング。

6
Nirali

「エラーエラー：パスのあるコントロールが見つかりません： 'アドレス-> 0->アドレスタイプ'」などのエラーが発生した場合は、値を渡している可能性がありますが、HTMLテンプレートは値を期待していますコントロール名付き。

これを解決するには、配列内の各アイテムを繰り返し処理し、ビューが期待するものに基づいて、値ごとに新しいフォームグループインスタンスを作成してから、新しい配列変数にプッシュします。これをフォームに設定します。

以下のコードを参照してください。

var tagsArray = [];
this.product.tags.forEach(product => tagsArray.Push(this.fb.group({tag: [product.tag, [Validators.required]]})));
this.productForm.setControl('tags', this.fb.array(tagsArray || []));

そのようにビューで参照されます：

<div class="tag" *ngFor="let t of tags.controls; let i = index" [formGroupName]="i" class="mb-2">
      <input type="text" formControlName="tag" placeholder="Tag name" class="primary_input">
       <button mat-icon-button (click)="deleteTag(i)">
           <mat-icon>clear</mat-icon>
       </button>
 </div>

これにより、以前の結果をロードしながら、値を追加してユーザー入力を検証する機能を有効にできます。

お役に立てれば。

0
user3640687