Angular Errors

Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ ^StackPost

Now, it is the time to update the code according to RC5 update of angular2, you just have to import FormsModule in your app.module.ts & your issue will get resolved. Let’s see how the updated code will look like:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

---

[ts] Module '"d:/AngularProjects/Version2/MyFirstApp/node_modules/rxjs/Rx"' has no exported member 'of'.

import { of } from 'rxjs/observable/of';

my-first-app@0.0.0 D:\AngularProjects\Version2\MyFirstApp
+-- @angular/cli@1.2.6
  `-- rxjs@5.5.11

---

ERROR Error: Uncaught (in promise): Error: No provider for StudentDetailsService!

From a Module which is using a Service, Must provide service Name
@NgModule({ providers: [ StudentDetailsService ] })

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule
  ],
  providers: [ StudentDetailsService ],
  declarations: [UsersComponent, UserComponent],
  exports : [UsersComponent, UserComponent]
})
export class UsersModule {

}

• Can't bind to 'formGroup' since it isn't a known property of 'form'

  To fix this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Here's the example of a basic module with ReactiveFormsModule import:

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { AppComponent }  from './app.component';
  
  @NgModule({
      imports: [
          BrowserModule,
          FormsModule,
          ReactiveFormsModule
      ],
      declarations: [
          AppComponent
      ],
      bootstrap: [AppComponent]
  })
  
  export class AppModule { }

  To explain further, formGroup is a selector for directive named FormGroupDirective that is a part of ReactiveFormsModule, hence the need to import it. It is used to bind an existing FormGroup to a DOM element. You can read more about it on Angular's official docs page.

  <!-- ngForm, ngModel « class="form-group", class="form-control" -->
  <form name="form" #f="ngForm" (ngSubmit)="f.form.valid && login()" novalidate>
    <div class="form-group" >
      <label for="username">Username</label>
      <!-- [(ngModel)] syntax, which makes binding the form to the model easy. « [(ngModel)]="student.name"
        to remove this use: {{model.name}} « {student.name}
      -->
      <input type="text" class="form-control" name='nameField' [(ngModel)]="student.name" #aliasUser="ngModel" minlength="3" required />
      
      <small *ngIf="f.controls['nameField']?.hasError('required')">FormControl </small>
      <small *ngIf="aliasUser.hasError('required')">Required!</small>
      <small *ngIf="aliasUser.hasError('minlength')">Minimum 3 chars</small>
      
      <!-- https://stackblitz.com/edit/angular2-login-form
        <div *ngIf="!userNameModel.valid" class="help-block">Username is required</div>
      -->
    </div>
    
    <div class="form-group">
      <button [disabled]="!aliasUser.valid" class="btn btn-primary">Change</button>
    </div>
  </form>

  Get form value to angular component

  <form (submit)="onSubmit()">
     <input [(ngModel)]="playerName">
  </form>

  let playerName: string;
  onSubmit() {
    return this.playerName;
  }
  

• control must be defined as 'standalone' in ngModelOptions.

  Using @angular/forms when you use a <form> tag it automatically creates a FormGroup.

  For every contained ngModel tagged it will create a FormControl and add it into the FormGroup created above; this FormControl will be named into the FormGroup using attribute name.

  <form #f="ngForm">
      <input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
      <span>{{ f.controls['firstField']?.value }}</span>
  </form>

  When you mark it as standalone: true this will not happen (it will not be added to the FormGroup).

---

Angular get FormControl object to component and get its value. Validators.required,

Form control states and From Modelink

<form [formGroup]="myFormGroup" (submit)="formGroup_login()">
  <div >
	<label for="nameControl">Username</label>
	<input type="text" formControlName='nameControl' value='{{student.name}}' #spy/>
  
	<small *ngIf="myFormGroup.get('nameControl').hasError('required')">Required!</small>
	<small *ngIf="myFormGroup.get('nameControl').hasError('minlength')">Minimum 3 chars</small>
  </div>

  <div>
	<button [disabled]="!myFormGroup.get('nameControl').valid" >Change</button>
  </div>
</form>

<div>
  <p>Track control state and validity with ngModel : {{spy.className}}</p><br />
  <p>Form modellink - Form Values : {{ myFormGroup.value | json }}</p>
</div>

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

  // Angular automatically updates data-bound properties during change detection.
  @Input() student: MyStudents; // https://angular.io/api/core/Input

  private myFormGroup: any;
  private nameControlBinding : string;

  constructor(
	 private route: ActivatedRoute,
	private router: Router,
	private studentService: StudentDetailsService,
	//private location: Location
	formBuilder: FormBuilder    
  ) {
	// When ever it get loaded, It gets 'id' from routerLink and get the details of that student-ID.
	// So that for FormControl instead of empty String we can bind with updated values
	this.getStudent();
	
	this.myFormGroup = formBuilder.group({
	  // Initial Binding « var loginControl = new FormControl("", Validators.required)
	  nameControl: new FormControl( this.student.name , 
			Validators.compose([Validators.required, Validators.minLength(3)]))
	});

  }

  ngOnInit(): void {
  }

  getStudent(): void {
	const id = +this.route.snapshot.paramMap.get('id');

	this.studentService.getStudentByID(id)
		.subscribe(student => this.student = student);
  }

  formGroup_Update() {
	// myControl.value « the value of a FormControl.
	const nameControlBindingValue : string = this.myFormGroup.get('nameControl').value;
	console.log('Form Group : ', this.myFormGroup.get('nameControl'));
	this.nameControlBinding = nameControlBindingValue;
	
	this.student.name = this.nameControlBinding;
	this.userNavigation();
  }
  
  returnUrl: string;
  userNavigation() {
	// get return url from route parameters or default to '/'
	this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/users';
	console.log('Navigation URL : ', this.returnUrl);
	this.router.navigate([this.returnUrl]);
  }
}