角度错误：类型“void”不可分配给类型“AbstractControl”

Question

I got an error when setting the default value of my FormControl, but it returns an error like this :

error TS2322: Type 'void' is not assignable to type 'AbstractControl'

This is my .ts file :

  profileForm  = new FormGroup({ 
    username   : new FormControl().setValue("a"),
    firstname  : new FormControl().setValue("a"),
    lastname   : new FormControl().setValue("a"),
    email      : new FormControl().setValue("a"),
    password   : new FormControl().setValue("a"),
  }); 

Help me to solve this.

Answer 1

FormControl.setValue() returns a void - which means it returns nothing.

You're effectively trying to create an object with the following signature:

{
  username: void,
  firstname: void,
  ...
}

Which is both meaningless and invalid for constructing a FormGroup . FormGroup expects an object with the following signature in its constructor:

{
  [key: string]: FormControl
}

So something more like:

{
  username: new FormControl(),
  firstname: new FormControl(),
  ...
}

If you want to access the form controls programmatically, you could do this:

const formControls = {
  username: new FormControl('a'),
  firstname: new FormControl('a'),
  ...
};

// or this
formControls.username.setValue('a');
formControls.firstname.setValue('a');
// ... etc

profileForm = new FormGroup({
  username: formControls.username,
  firstname: formControls.firstname,
  ...
});

Answer 2

You can use form builder:

profileForm: FormGroup;

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
        this.profileForm  = this._formBuilder.group({
            username: [{ value: 'a' }],
            ...
          }); 
    }