为什么 FormGroup 控件在 formGroup.reset() 之后为空？

Question

我正在设置这种反应形式：

const v = Validators;

this.entryForm = this.formBuilder.group({

  firstName: ['', [v.minLength(2), v.required]],
  lastName: ['', [v.minLength(2), v.required]],
  email: ['', [v.email, v.required]],
  instagram: ['', [v.minLength(2), v.required]],
  company: [''],
  title: [''],
  agree: [false, v.requiredTrue],

});

但是在我调用this.entryForm.reset()之后，像：

this.entryForm.reset();

...entryForm的表单控件是null，导致错误。即使我尝试重新实例化 FormGroup，我仍然看到 null 表单控件。我到底做错了什么？

这是完整的 TypeScript 组件：

@Component({
  selector: 's2es-enter-page',
  templateUrl: './enter-page.component.html',
  styleUrls: [
    './enter-page.component.sass',
  ]
})
export class EnterPageComponent extends AbstractPageComponent implements OnInit {

  entryForm: FormGroup;
  inited = false;

  constructor(
    private readonly pageService: PageService,
    private readonly http: HttpClient,
    private readonly formBuilder: FormBuilder,
  ) {
    super(pageService);

    this.entryForm = new FormGroup({
      first: new FormControl(),
    });

    (window as any).localJsonpCallback = () => {
      this.entryForm.reset();
    };
  }

  onSubmit() {
    const url = 'https://script.google.com/macros/s/AKfycbyRrxv8Ri-GRpuXqWXo2inCPzmAE8mG6Q8oQIGPmUeMaGbD5jCn/exec?';
    const q: string[] = [];
    const company = this.entryForm.get('company').value + ',' + this.entryForm.get('title').value;
    const name = this.entryForm.get('firstName').value + ',' + this.entryForm.get('lastName').value;

    q.push('name=' + name);
    q.push('email=' + this.entryForm.get('email').value);
    q.push('instagram=' + this.entryForm.get('instagram').value);
    if (company.length > 1) { q.push('company=' + company); }
    q.push('prefix=localJsonpCallback');

    const uri = url + q.join('&');
    this.http.jsonp(uri, 'JSONP_CALLBACK').subscribe((val) => {
      console.log(val);
    });
  }

  /**
   * Since this is not supported on MS browsers.
   */
  placeholderShown(id: string): boolean {
    if (this.inited) {
      if (this.entryForm.get(id).value !== null) {
        return !this.entryForm.get(id).value.length;
      } else {
        // I don't know why this is null.
        // throw new Error(id);
        // return false;
      }
    }
  }

  setupForm() {

    const v = Validators;

    this.entryForm = this.formBuilder.group({

      firstName: ['', [v.minLength(2), v.required]],
      lastName: ['', [v.minLength(2), v.required]],
      email: ['', [v.email, v.required]],
      instagram: ['', [v.minLength(2), v.required]],
      company: [''],
      title: [''],
      agree: [false, v.requiredTrue],

    });
  }

  /**
   *
   */
  ngOnInit() {

    super.ngOnInit();

    this.setupForm();

    this.inited = true;

  }

}

Answer 1

重置（）；用于将其重置为启动时的默认状态。 reset() 用于清除表单。

所以，如果你想从中获取价值，你可以使用 on ngSubmit="saveForm()"

在saveForm方法中可以得到值

this.entryForm.controls.firstName.value

希望对您有所帮助。

Answer 2

官方文档 (See here) 实际上声称，控件将设置为空。但是创建表单后无需重置表单。如果你想用其他值填充它（比如 ''），你可以调用 reset 并将 formState 参数设置为所需的值。

为什么 FormGroup 控件在 formGroup.reset() 之后为空？

Why are FormGroup controls null after formGroup.reset()?

angular

angular-forms

angular-reactive-forms