FormGroupDirective 及 FormGroup 問題


#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


改寫成這樣子

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


#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 。


#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>