I thought I would update this since I was able to at least work around this
issue. I was unable to use *FormBuilder *at all. I could never get past the
exceptions that I keep seeing. However, I was able to use *ControlGroup
*directly
and use *ng-form-model* in the template. Here is what worked for me,
although I also had to tweak the *angular2.d.ts* file since *ControlGroup *and
*Control *seemed to have incomplete descriptions:
<form [ng-form-model]="echoStuff" (submit)="echoSubmit(echo_input_ref.value)"
class="form-inline">
<div class="form-group"
[class.has-success]="echoStuff.controls.echoText.valid"
[class.has-error]="!echoStuff.controls.echoText.valid">
<label for="txtEcho">Echo:</label>
<input id="txtEcho" ng-control="echoText" autofocus #echo_input_ref
type="text"
placeholder="(echo input)"
(input)="txtEchoInput(echo_input_ref.value)" class="form-control"/>
</div>
<button id="echoBtn" type="submit" [disabled]="!echoStuff.valid" class="btn
btn-primary">Submit</button>
<div *ng-if="!echoStuff.controls.echoText.valid" class="alert alert-danger"
role="alert">
{{echoStuff.controls.echoText.errors.msg}}
</div>
</form>
@Component({
selector: "echo"
})
@View({
templateUrl: "ui/echo/echoA2.html",
directives: [formDirectives, NgIf, CSSClass]
})
export class EchoCmpA2 extends AppCmpBaseA2
{
echoResult: string = "";
private echoStuff: ControlGroup;
constructor(private echoService: EchoService)
{
super();
console.log("EchoCmpA2");
// echoStuff is a ControlGroup of a set of Controls that can be validated
as a group
// This is a StringMap whose key is a ng-control reference from the
template
this.echoStuff = new ControlGroup({echoText: new Control("TestMe",
this.validateEchoText)});
}
/**
* Validator function for echo input control
* @param c Control being validated
* @returns {any} null if OK, or some kind of error object.
* In this example, the error object contains a msg string with the type of
error
*/
validateEchoText(c: Control): any
{
var s: string = c.value.toString();
if (s.length === 0)
{
return {msg: "Input is required"};
}
if (s.length > 10)
{
return {msg: "Input length must be 10 characters or less"};
}
var re = /^[a-zA-Z]+$/;
if (!s.match(re))
{
return {msg: "Only letters are allowed"};
}
return null;
}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
