export interface IUser {
    id: number;
    name: string;
    email: string;
    password: string;
}

<form>
    <div class="form-group">
        <label form="name">Username</label>
        <input id="name" type="text" class="form-control" />
    </div>
    <div class="form-group">
        <label form="email">Email</label>
        <input id="email" type="text" class="form-control" />
    </div>
    <div class="form-group">
        <label form="password">Password</label>
        <input id="password" type="password" class="form-control" />
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

import { Component } from '@angular/core';
import { Control, ControlGroup, Validators } from '@angular/common';
 
@Component({
    selector: 'signup-form',
    templateUrl: 'app/users/signup-form.component.html'
})
export class SignupFormComponent {
    form = new ControlGroup({
        name: new Control('', Validators.required),
        email: new Control('', Validators.required),
        password: new Control('', Validators.required)
    });
 
    onSubmit(): void {
        console.log(this.form.value);
    }
}

<form [ngFormModel]="form" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label form="name">Username</label>
        <input id="name" type="text" class="form-control"
               ngControl="name"/>
        <label class="text-danger" *ngIf="!form.controls['name'].valid">
            Username is required.
        </label>
    </div>
    <div class="form-group">
        <label form="email">Email</label>
        <input id="email" type="text" class="form-control"
               ngControl="email" #email="ngForm"/>
        <label class="text-danger" *ngIf="email.touched && !email.valid">
            Email is required.
        </label>
    </div>
    <div class="form-group">
        <label form="password">Password</label>
        <input id="password" type="password" class="form-control"
               ngControl="password" #password="ngForm"/>
        <label class="text-danger" *ngIf="password.touched && !password.valid">
            Password is required.
        </label>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

form = new ControlGroup({
    name: new Control('', Validators.required),
    email: new Control('', Validators.required),
    password: new Control('', Validators.required)
});

 import { Control, ControlGroup, Validators } from '@angular/common';

<form [ngFormModel]="form" (ngSubmit)="onSubmit()">

 <label class="text-danger" *ngIf="!form.controls['name'].valid">

    onSubmit(): void {
        console.log(this.form.value);
    }

//same as before...
import { SignupFormComponent } from './users/signup-form.component';
 
@Component({
    //same as before…
    template: `
                //same as before…                    
                <li><a [routerLink]="['AddUser']">Add User</a></li>
               //same as before…
    `,
    //same as before…
})
@RouteConfig([
    //same as before…    
    { path: '/adduser', name: 'AddUser', component: SignupFormComponent }
])
//same as before...

import { Control, ControlGroup, Validators, FormBuilder } from '@angular/common';

form: ControlGroup;
 
constructor(formBuilder: FormBuilder) {
    this.form = formBuilder.group({
        name: ['', Validators.required],
        email: ['', Validators.required],
        password: ['', Validators.required]
    });
}

import { Control } from '@angular/common';
 
export class UsernameValidators {
    static cannotContainSpace(control: Control) {
        if (control.value.indexOf(' ') >= 0) {
            return { cannotContainSpace: true };
        }
        return null;
    }
}

 { required:true }

{
  minlength : {
     requiredLength : 3,
     actualLength : 1
  }
}

 import { UsernameValidators } from './usernameValidators';

 name: ['', Validators.compose([Validators.required, UsernameValidators.cannotContainSpace])],

<div class="form-group">
    <label form="name">Username</label>
    <input id="name" type="text" class="form-control"
           ngControl="name"
           #name="ngForm" />
    <div *ngIf="name.touched && name.errors">
        <label class="text-danger" *ngIf="name.errors.required">
            Username is required.
        </label>
        <label class="text-danger" *ngIf="name.errors.cannotContainSpace">
            Username can't contain space.
        </label>
    </div>
</div>

import {Control} from '@angular/common';
 
export class EmailValidators {
    static email(control: Control) {
        var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var valid = regEx.test(control.value);
        return valid ? null : { email: true };
    }
}

 control(value: Object, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : Control

nameShouldBeUnique(control: Control) {
    let name: string = control.value;
    return new Promise((resolve) => {
        this._userService.isUserNameUnique(<IUser>{ "name": name }).subscribe(
            (result: IResult) => {
                resolve(                    
                    result.result ? null : { 'nameShouldBeUnique': true }
                );
            },
            error => {
                resolve(null);
            }
        );
    });
}

this.form = _formBuilder.group({
    name: ['', Validators.compose([
        Validators.required,
        UsernameValidators.cannotContainSpace
    ]),
        (control: Control) => this.nameShouldBeUnique(control)],

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from  './user';
import { IResult } from './result';
 
@Injectable()
export class UserService {
    private _checkUserUrl = '/home/checkUser';
 
    constructor(private _http: Http) { }
 
    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
 
    isUserNameUnique(user: IUser): Observable<IResult> {
        let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
        let options = new RequestOptions({ headers: headers });
 
        return this._http.post(this._checkUserUrl, JSON.stringify(user), options)
            .map((response: Response) => <IResult>response.json())
            .do(data => console.log("User: " + JSON.stringify(data)))
            .catch(this.handleError);
    }
}

export interface IResult {
    result: boolean;
}

namespace MVC5Angular2.Controllers
{
    public class HomeController : Controller
    {
        [HttpPost]
        public ActionResult CheckUser(User user)
        {
            var isUnique = new { result = true };
            if (user.Name?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)
            {
                isUnique = new { result = false };
            }
 
            return new ContentResult
            {
                Content = JsonConvert.SerializeObject(isUnique, new JsonSerializerSettings
                {
                    ContractResolver = new CamelCasePropertyNamesContractResolver()
                }),
                ContentType = "application/json",
                ContentEncoding = Encoding.UTF8
            };
        }
    }
}

@Component({
    selector: 'signup-form',
    templateUrl: 'app/users/signup-form.component.html',
    providers: [ UserService ]
})
export class SignupFormComponent {
 
    constructor(private _formBuilder: FormBuilder, private _userService: UserService) {

<div *ngIf="name.touched && name.errors">
    <label class="text-danger" *ngIf="name.errors.required">
        Username is required.
    </label>
    <label class="text-danger" *ngIf="name.errors.cannotContainSpace">
        Username can't contain space.
    </label>
    <label class="text-danger" *ngIf="name.errors.nameShouldBeUnique">
        This username is already taken.
    </label>
</div>

<input id="name" type="text" class="form-control"
       ngControl="name"
       #name="ngForm" />
<div *ngIf="name.control.pending">
    Checking server, Please wait ...
</div>

onSubmit(): void {
    console.log(this.form.value);
 
    this.form.find('name').setErrors({
        invalidData : true
    }); 
}

<div *ngIf="name.touched && name.errors">
    <label class="text-danger" *ngIf="name.errors.invalidData">
        Check the inputs....
    </label>
</div>

  { name="VahidN", email="email@site.com", password="123"}

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from  './user';
import { IResult } from './result';
 
@Injectable()
export class UserService {
    private _addUserUrl = '/home/addUser';
 
    constructor(private _http: Http) { }
 
    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
 
    addUser(user: IUser): Observable<IUser> {
        let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
        let options = new RequestOptions({ headers: headers });
 
        return this._http.post(this._addUserUrl, JSON.stringify(user), options)
            .map((response: Response) => <IUser>response.json())
            .do(data => console.log("User: " + JSON.stringify(data)))
            .catch(this.handleError);
    }
}

[HttpPost]
public ActionResult AddUser(User user)
{
    user.Id = 1; //todo: save user and get id from db
 
    return new ContentResult
    {
        Content = JsonConvert.SerializeObject(user, new JsonSerializerSettings
        {
            ContractResolver = new CamelCasePropertyNamesContractResolver()
        }),
        ContentType = "application/json",
        ContentEncoding = Encoding.UTF8
    };
}

onSubmit(): void {
    console.log(this.form.value);
 
    /*this.form.find('name').setErrors({
            invalidData : true
        });*/
 
    this._userService.addUser(<IUser>this.form.value)
        .subscribe((user: IUser) => {
            console.log(`ID: ${user.id}`);
        });
}

مزایای  Interface ‌ها چیست ؟

در حالت عادی ارث بری از چند کلاس به طور هم زمان امکان پذیر نیست ولی Interface‌ها این مزیت را دارند که به هر تعداد که لازم است، کلاسهای مشتق شده از آنها ارث بری کنند. این موضوع یکی از مهم‌ترین مزایای Interface می‌باشد. هم چنین با استفاده از Interfaceها کد‌ها قابلیت بهتری در نگهداری، انعطاف پذیری و استفاده مجدد پیدا میکنند.

Abstract Class چیست ؟

کلاس Abstract، یکی از ابزارهای مهم OOP می‌باشد که نمی‌توان از آنها نمونه‌ای ساخت. به عبارتی دیگر نمی‌توانیم متغیری از کلاس Abstract تعریف کنیم. یک کلاس Abstract  شبیه Interface میباشد ولی با دیدی وسیعتر. این کلاسها می‌تواند دارای متدهای Abstract باشند که شبیه Interface فقط اعلام میشوند و باید در کلاسهای مشتق شده بازنویسی شوند. البته میتوان در این کلاسها متدهایی داشت که Abstract نیستند و احتیاجی به پیاده سازی آنها در کلاسهای مشتق شده ندارند.

باید توجه داشت که تنها متدهایی از کلاس abstract الزام به پیاده سازی دارند که صریحا کلمه‌ی abstract در تعریف آن متد ذکر شده باشد.
در واقع همین متد‌ها هم الزامی به پیاده سازی ندارند. یعنی می‌شود در subclass هم به صورت abstract ذکر شوند. البته به شرطی که subclass هم به صورت abstract تعریف شده باشد.
در ضمن کلاس abstract میتواند متد‌های ساده یا غیر abstract هم داشته باشد. همانطور که میدانید متد‌های غیر abstract باید بدنه داشته باشند و نیازی به پیاده سازی ندارند.
پس کلاس abstract هم میتواند متدهایی داشته باشد که باید پیاده سازی شوند و هم متدهایی داشته باشد که لازم نباشد پیاده سازی شوند.

با توجه به تعاریف ذکر شده کلاس Abstract  حالتی بین کلاسهای معمولی و Interface‌ها میباشد و کلاسی میباشد که غیر قطعی و ناتمام است که باید در سطح فرزندانش تکمیل شود .

 مزایای کلاسهای  Abstract چیست ؟

یکی از مزیت‌های کلاس Abstract  فراهم نمودن کلاسی پایه برای دیگر کلاسهای مشتق شده است؛ با این توضیح که متدهای آن می‌توانند کد نویسی شده باشند یا خیر. از طرفی پیاده سازی تمام متدهای Abstract در کلاس مشتق شده اجباری نیست (برخلاف Interface).

تعریف سطوح دسترسی برای متدها و خصوصیت‌ها مانند کلاسهای معمولی نیز یکی دیگر از مزیت‌های این کلاس‌ها است.

 تفاوت بین کلاسهای  Abstract  و  Interface

1- یک کلاس معمولی تنها می‌تواند از یک کلاس Abstract ارث بری کند ولی همان کلاس میتواند از چندین Interface ارث ببرد.

2- یک Interface  فقط میتواند اعلان متدها و خصوصیتها را داشته باشد؛ اما یک کلاس Abstract  علاوه بر آنها میتوانید متدها و خصوصیتهایی با کدهای کامل داشته باشد.

3- عناصر موجود در کلاس Abstract میتوانند مانند یک کلاس معمولی دارای سطح دسترسی باشند؛ ولی Interface‌ها فاقد این امکان هستند.

4- وقتی شما متدی را به کلاس Abstract اضافه می‌کنید، به طور خودکار به همه زیر کلاسها اعمال می‌شود؛ اما در Interface اگر متدی اضافه کنید باید در تمام زیر کلاسها آن را اعمال کنید .

5- کلاس‌های Abstract مانند کلاسهای معمولی می‌توانند دارای فیلد و عناصر دیگری (مثل ثابت‌ها) باشند؛ در حالیکه یک Interface فاقد این امکان می‌باشد. همچنین کلاس abstract میتواند شامل سازنده باشد، اما اینترفیس نمیتواند.

6- Abstract  یکی از انواع کلاس است؛ ولی Interface کلاس نیست .

7- اینترفیس تنها میتواند از اینترفیس ارث بری کند اما کلاس abstract میتواند از اینترفیس، کلاس Abstract و یا سایر کلاس‌ها ارث بری کند. 

چه زمانی از  Interface ‌ها و یا کلاسهای  Abstract  استفاده کنیم؟

- با توجه به توضیحات ذکر شده  مواقعی که نیاز به وراثت چند گانه داریم، باید از Interface استفاده کنیم؛ به دلیل اینکه این امکان در کلاس‌های Abstract  وجود ندارد.

- زمانی که بخواهیم تمام متدهای معرفی شده در کلاس پایه به طور کامل در کلاس مشتق شده پیاده شوند باید از Interface استفاده کنیم.

- وقتی در پروژه‌های بزرگ با تغییرات زیادی مواجه هستیم، استفاده از کلاس Abstract  توصیه می‌شود؛ چون با تغییر آن به طور خودکار تغییرات در کلاسهای مشتق شده اعمال می‌شوند.

- با توجه به اینکه به غیر از اعلان متدها و خصوصیت‌ها امکان تعریف عناصر دیگری در Interfaceها وجود ندارد، در صورتیکه ملزم به استفاده  از این عناصر باشیم، استفاده از کلاسهای Abstract  ضروری می‌باشد.

- به طور کلی یک Interface چارچوب و قابلیتهای یک کلاس را مشخص میکند و یک قرارداد است؛ ولی کلاس Abstract نوع کلاس را معین می‌کند. این تفاوت کمک بسیاری برای تشخیص زمان استفاده از این دو را به برنامه نویسان میدهد.

https://localhost:5001/swagger/LibraryOpenAPISpecification/swagger.json

<div class="lessons-list" *ngIf="lessons else loading">
... 
</div>

<ng-template #loading>
     <div>Loading...</div>
</ng-template>

<ng-container *ngTemplateOutlet="loading"></ng-container>

<ng-template #estimateTemplate let-lessonsCounter="estimate">
     <div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container *ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>

export class AppComponent {
     totalEstimate = 10;
     ctx = {estimate: this.totalEstimate};
}

    <ng-container *ngTemplateOutlet="templateRef; context: exampleContext"></ng-container>
    <ng-template #templateRef let-default>
      <div>
        '{{default}}'
      </div>
    </ng-template>

export class AppComponent {
  exampleContext = {
    $implicit: 'default context property when none specified'
  };
}

 [ngOutletContext]="exampleContext"

<ng-template #defaultTabButtons>
</ng-template>

export class AppComponent implements OnInit {
   @ViewChild('defaultTabButtons') private defaultTabButtonsTpl: TemplateRef<any>;
   ngOnInit() {
      console.log(this.defaultTabButtonsTpl);
   }
}

<ng-container *ngTemplateOutlet="headerTemplate ? headerTemplate: defaultTabButtons">
</ng-container>

 @Input() headerTemplate: TemplateRef<any>;

 <tab-container [headerTemplate]="defaultTabButtons"></tab-container>