Angular Forms & Two Way Data Binding

two-way-data-binding.html

@Component({
//   selector: 'app-root',
//   templateUrl: './app.component.html',
//   styleUrls: ['./app.component.css']
// })
// export class AppComponent {
//   user = { name: '', surname: '' }
// }

<div class="container mt-5">
  <form #userForm="ngForm" (ngSubmit)="onFormSubmit(userForm)">
    <div class="card mb-3 bg-secondary text-white">
      <div class="card-body">
        Full Name: {{ user.name }} {{ user.surname }}
      </div>
    </div>
    <div class="form-group">
      <label for="name">İsim</label>
      <input type="text" [(ngModel)]="user.name" name="name" id="name" class="form-control" placeholder="İsim girinix" required maxlength="50" minlength="2">
    </div>

    <div class="form-group">
      <label for="surname">Soyisim</label>
      <input type="text" [(ngModel)]="user.surname" name="surname" id="surname" class="form-control" placeholder="Soyisim giriniz" required maxlength="50" minlength="2">
    </div>
  </form>
</div>