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

官方文档（See here）实际上声称，控件将设置为null。创建表单后，无需重置表单。如果您希望用其他值（例如''来填充它，则可以在reset参数设置为所需值的情况下调用formState。

Answer 2

reset（）;用于在启动时将其重置为默认状态。 reset（）用于清除表单。

因此，如果您想从中获取价值，可以在ngSubmit =“ saveForm（）”上使用

在saveForm方法中您可以获取值

this.entryForm.controls.firstName.value

希望它会对您有所帮助。

为什么FormGroup控件在formGroup.reset（）之后为null？

2 个答案: