Unable to create new employee information for mean stack example employee management system #10

Hi,

Good evening.

This is Srinivasa Rao Katta from India and I was working on our MEAN STACK example web app called employee database system.

I have followed our mean stack example tutorial procedure to install npm and server and client for this employee database web app and I have installed mongodb compass software on my windows 10 and given mongodb://localhost/meanStackExample string in .env file under server folder and started server and client using npx ts-node src/server.ts and ng serve -o without any problem and I was seeing Employee database system header and new employee

Here is client running information,as follows;

D:\node-js\node-v20.20.0-win-x64\client>ng serve -o
Browser bundles
Initial chunk files | Names | Raw size
main.js | main | 17.67 kB |
styles.css | styles | 8.81 kB |

                 | Initial total    |  26.48 kB

Server bundles
Initial chunk files | Names | Raw size
main.server.mjs | main.server | 18.91 kB |
server.mjs | server | 1.81 kB |
polyfills.server.mjs | polyfills.server | 243 bytes |

Application bundle generation complete. [14.763 seconds] - 2026-02-27T15:26:26.729Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
➜ Local: http://localhost:4200/
➜ press h + enter to show help

Here is server running information,as follows;

D:\node-js\node-v20.20.0-win-x64\mean-stack-example\server>npx ts-node src\server.ts
[dotenv@17.3.1] injecting env (1) from .env -- tip: 🔐 encrypt with Dotenvx: https://dotenvx.com
Server running at http://localhost:5200...

I have attached web screen shot information for your reference and I was seeing Employees Management System on top of the web screen and Employees List titile information and Add a New Employee button and there was no response from New Employee button to create new employee information.

Please advice me How Can I proceed further.

I am new to mean stack technology.

I was able to connect to meanStackExample database and was seen employees table under it without any problem using mongosh.exe client.

Please let me know,If You need any additional information from me.

Seems,I have got formbuilder declaration and usage error for following code from following file ;as follows;

\client\src\app\employee-form\employee-form.component.ts

employeeForm = this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3)]],
position: ['', [Validators.required, Validators.minLength(5)]],
level: ['junior', [Validators.required]],
});

constructor(private formBuilder: FormBuilder) {
effect(() => {
this.employeeForm.setValue({
name: this.initialState()?.name || '',
position: this.initialState()?.position || '',
level: this.initialState()?.level || 'junior',
});
});
}

Here is npm and node version information,as follows;

npm -version
10.8.2
node -v
v20.20.0

OS:Windows 10

Mongodb Data base server version: 8.2

server/.env information,as follows;
D:\node-js\node-v20.20.0-win-x64\mean-stack-example\server>type .env
ATLAS_URI=mongodb://localhost/meanStackExample?retryWrites=true&w=majority

Thanks in advance and have a nice day guys...

Srinivas,
cell:9492197514

mean-stack-example-web-screen-info.docx