Form component created once and reused shares the

问题:

I have a form component created once and reused twice shares the same data . Please have a look at the code

// sign in component shared

import { Component, OnInit, Input } from '@angular/core';
import { SignInFormService } from '../../services/sign-in-form-create.service';
import { Auth } from '../../services/auth.service';

@Component({
  selector: 'app-sign-in-form',
  templateUrl: './sign-in-form.component.html',
  styleUrls: ['./sign-in-form.component.css']
})
export class SignInFormComponent implements OnInit {

  constructor(private auth: Auth) { }
  @Input() userType: string;
  ngOnInit() {
    this.createForm();
  }

createForm() {
  this.formGroup = this._formBuilder.group({
      username: '',
      password: ''
  });
}

// Code On editor 1.This is an working example works fine without using service 2. This is not working when a service is used

My question is that component why the component shares the same data when used with a service. How to still protect the component from sharing the data even when the service is used?