FormGroupDirective 及 FormGroup 問題

General
1

我有一個form用#="ngForm"導出變量，希望能從Component.ts取得變量的formgroup跟formcontrol來對欄位進行操作，但是Component.ts那邊用ViewChild去接變量後接到的是FormGroupDirective並不是FormGroup ，我只要對變量操作傳值就會出現 is not a function，請問有人有遇過這個問題嗎?

程式碼如下:

2

你怎麼將兩種表單模式混用了？先挑要使用 template driven 還是 reactive form. 之後再來看問題

3

感謝回復，因為我的需求比較特殊，是要用reactive form的方式，在Component.ts那邊操作欄位值，但因為欄位眾多想要節省重複 new FormControl跟自己去核對綁定欄位的動作。

然後因為有試一下#="ngForm"導出變量、搭配ViewChild能夠在Component.ts那取到FormGroup裡的所有DOM元素，且元素裡面都有一個FormControl，想說是不是能直接操作這裡面的FormControl就能節省綁定欄位的動作，不知道可不可行。

4


改寫成這樣子

雖然我還是看不懂你的需求是什麼

1個讚
5

我的需求是要這樣沒錯，但是在ngAfterViewInit之外的話會有問題，我找找看有沒有辦法，謝謝Kevin大大

6

兩者拿到的 ref 都是同一個，這樣的用意是什麼？
或許你把你的實際的需求或是想法描述出來比較好，搞不好不需要這樣處理。

7

profileForm是我測試用的應該拿掉抱歉，我也再釐清一下好像自己也有點搞混，好像是繞路了，其實我的需求是要在Component.ts做一個元件有類似setValue方法，給他一個ID跟VALUE就能夠直接用formcontrol去控制每一個欄位的值，但我看官網的範例我有100個欄位好像就要先 new 100 formcontrol，好像沒有用到的欄位也要 new，我想要隨時可以操縱他，但不要每個欄位都必須先new起來放這樣，我再想一下好了，謝謝各位大大

8

看你的描述應該就是要做一個不固定長度、可以動態增減 FormControl 的表單。如果是這樣的話，你就不用再想了，你需要的是 FormArray 。 FormArray 就是需要的話才把 Control 塞到裡面，然後透過 index 去存取 Control 。

1個讚
9

好，感覺應該會用到，我來查查看，感謝

10

app.component.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, FormArray, AbstractControl } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  constructor(private fb: FormBuilder) { }

  data = {
    address: ' school address ',
    school: {
      name: 'school name',
      teacher: [
        {
          name: 'teacher name1'
        },
        {
          name: 'teacher name2'
        }
      ]
    }
  }

  ngOnInit(){
    this.initLoad();
  }

  form: FormGroup;
  school: FormGroup;
  teachers: FormArray;

  initLoad() {
    const data = this.data;
    const { teacher } = data.school;
    this.form = this.fb.group({
      address: [data.address],
      school: this.fb.group({
        name: [data.school.name],
        teacher: this.teacherInit(teacher)
      })
    });
    this.school = this.form.get('school') as FormGroup;
    this.teachers = this.school.get('teacher') as FormArray;
  }

  private teacherInit(data: any[]): FormArray {
    return data.reduce((rs, c) => {
      rs.push(this.fb.group({
        name: [c.name]
      }));
      return rs;
    }, new FormArray([])) as FormArray;
  }
}

app.component.html

<hello name="{{ name }}"></hello>
<p>
	Start editing to see some magic happen :)
</p>

<form nz-form [formGroup]="form" nzLayout='vertical' style="padding:20px 30px;">
	
  <div nz-form-item>
		<div nz-form-label>
			<span>学校-区域</span>
    </div>
    <div nz-form-control>
      <input nz-input formControlName="address" />
      </div>
  </div>
  <div nz-form-item formGroupName="school">
		<div nz-form-label>
			<span>学校-名称</span>
    </div>
    <div nz-form-control>
      <input nz-input formControlName="name" />
      </div>
  </div>
  <div nz-form-item formGroupName="school">
		<div nz-form-label>
			<span>学校-教师</span>
    </div>
    <div formArrayName="teacher">
      <div nz-form-control *ngFor="let m of teachers.controls;index as index" >
        <div [formGroupName]="index">
          <input nz-input formControlName="name" />
        </div>
      </div>
    </div>
  </div>
</form>
1個讚