autocomple form validation (required and custom)

[JanickRoss]

I use autocomple primeng control and I want know the best way to include this control on my validation form. The field is required and I want verifu also that my autocomplete have a good object value not a simple string or empty object. I want that my submit buttan is enable only if my form is valid. Thanks for your help

My model is

Code: Select all

export class Player {
    id: string;
    name: string;
    img: string;
}

My html implementation is

Code: Select all

 <form (ngSubmit)="onSubmit(tennisCreationForm.value)" #tennisCreationForm="ngForm" >
        {{diagnostic}}
        <div class="form-group">
            <label for="homeTeamId">Home Player</label>
             <p-autoComplete [(value)]="model._homeTeamId" [suggestions]="playerSearchResults" (completeMethod)="search($event,true)"  field="name" required  style="width:100%" [minLength]="1" placeholder="Home player">
                <template #homePlayer>
                    <li class="ui-autocomplete-list-item ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                        <img src="{{homePlayer.img}}" style="display:inline-block;margin:2px 0 2px 2px" />
                        <div style="font-size:20px;float:right;margin:15px 10px 0 0">{{homePlayer.name}}</div>
                    </li>
                </template>
            </p-autoComplete>
            <!--<input type="text" class="form-control" required [(ngModel)]="model._homeTeamId" ngControl="_homeTeamId" #homeTeamId="ngForm" #spyHTID>
            TODO: remove this: {{model.homeTeamId}} {{spyHTID.className}}-->
           <!-- <div [hidden]="homeTeamId.valid || homeTeamId.pristine" class="alert alert-danger">
                Home team is required
            </div>-->
        </div>
       <button type="submit" class="btn btn-default" [disabled]="!tennisCreationForm.form.valid">Submit</button>

            {{submitted}}
</form>

And my component is

Code: Select all

import {Component} from 'angular2/core';
import {NgForm} from 'angular2/common';
import {TennisMatch} from '../models/tennismatch';
import {Player} from '../models/Player';
import {TennisMatchService} from '../services/tennismatch.service';
import {AutoComplete} from 'primeng/primeng';

@Component({
    selector: 'tennis-match-creation',
    templateUrl: 'app/tennis/components/tennis-match-creation.html',
    directives: [AutoComplete],
    providers: [TennisMatchService]
})
export class TennisMatchCreationComponent {
   
    errorMessage: string;
   
    submitted = false;

    bestOf = [{ "value": 0, "name": "Best of 1" }, { "value": 1, "name": "Best of 3" }, { "value": 2, "name": "Best of 5" }];
    
    players:Player[];
   

    model = new TennisMatch(null, null,1);

    constructor(private _tennisMatchService: TennisMatchService) { }

    onSubmit(form) {
        this.submitted = true;
        this._tennisMatchService.addTennisMatch(this.model)
                     .subscribe(
                       tennisMatch  => console.log(tennisMatch),
                       error =>  this.errorMessage = <any>error);
    }

    get diagnostic() {
        return JSON.stringify(this.model);

    }
    
    newTennisMatch() {
         this.model = new TennisMatch(null, null,1);
          this._tennisMatchService.getTennisPlayers()
            .subscribe(            
                players => this.players = players,
                error => this.errorMessage = <any>error);
    
    }

    homePlayer: Player;

    playerSearchResults: Player[];

    search(event,isHome) {
        //this._tennisMatchService.getTennisPlayers().map(res => this.results=<Player[]>res);
        if(isHome===true)
        {
         this._tennisMatchService.getTennisPlayers()
            .subscribe(            
                players => this.playerSearchResults = players,
                error => this.errorMessage = <any>error);
        }
    }

    
    
}

[cagatay.civici]

We'll work on it and get back to you.

[JanickRoss]

great Do you have a approximative date to release this feature ?

[cagatay.civici]

It will be worked on for 1.0.0-beta1 which is due next week. Issue you may want to monitor is;

https://github.com/primefaces/primeng/issues/158

[cagatay.civici]

We're making important changes to all input components to use ngModel instead of value attribute and add support to model driven forms via ngControl or ngFormControl. It will be ready in a couple of days for 1.0.0-beta.1.