Angular sample; can't use webview-ui-toolkit UI elements in a form

[devna13]

Describe the bug

I'm getting errors when I use @vscode/webview-ui-toolkit UI elements in angular form.

second form generated with basic html elements works fine.

To reproduce

create a simple from and use it in the app.component.html

\hello-world\webview-ui\src\app\app.component.ts

  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl(""),
  });

  onSubmit() {
    //console.warn(this.profileForm.value);
    vscode.postMessage({
      command: "form submitted",
      text: this.profileForm.value,
    });
  }

\hello-world\webview-ui\src\app\app.component.html

  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <vscode-text-field formControlName="firstName" placeholder="first name"
      >First Name:</vscode-text-field
    >
    <br />
    <vscode-text-field formControlName="lastName" placeholder="last name"
      >Last Name:</vscode-text-field
    >
    <br />
    <vscode-button type="submit" [disabled]="!profileForm.valid">Submit</vscode-button>
  </form>

Screenshots

[hawkticehurst]

Thanks for bug report @devna13!

I've gotten a few other form-related issues on the main toolkit repo so happy to fold this under that work and see if I can find a solution for all of you.

[hawkticehurst]

Hi @devna13!

Back with a final update: I'm very sorry to say that the toolkit is being deprecated and all development on these samples has come to a close.

There was an announcement earlier this week on the main toolkit repo where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!