Menu
I have in my application a registration form. But within this registration form there is an optional 'password' and 'repeat password' input. Since I'd rather not use the FormControl object to retrieve these 2 values (other values are fine), I would like a workaround for the usage of ngModel within a <form>
TS:
public password: string = ''; public passwordRe: string = ''; public registrationForm; constructor(public fb: Formbuilder) { this.registrationForm = this.fb.group({ 'firstname' : [null, Validators.required], 'lastname': [null, Validators.required] }); } HTML
<form [formGroup]="registrationForm" (ngSubmit)="doSomething()"> <div class="form-group" [ngClass]="{'has-error':!registrationForm.controls['firstname'].valid && registrationForm.controls['firstname'].touched}"> <label>Firstname: *</label> <input class="form-control" type="text" placeholder="Firstname" [formControl]="registrationForm.controls['firstname']"/> </div> <div class="form-group" [ngClass]="{'has-error':!registrationForm.controls['lastname'].valid && registrationForm.controls['lastname'].touched}"> <label>Lastname: *</label> <input class="form-control" type="text" placeholder="Lastname" [formControl]="registrationForm.controls['lastname']"/> </div> <!-- NG MODELS --> <input type="password" [(ngModel)]="password"/> <input type="password" [(ngModel)]="passwordRe" /> <input type="submit" value="Some submit button"/> </form> This page is shown on multiple pages as a child, via a selector. Placing the passwords on top, outside of the form would be the laziest solution, but I'd have to change some code to get that. (plus it doesn't look good) So I was wondering if there's a workaround for this specific issue.
718
We simply add the NgModel directive and a name attribute to each element. According to the docs: NgForm creates a top-level FormGroup instance and binds it to a form to track aggregate form value and validation status. This is done automatically when FormsModule is imported.
The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
You can use [(ngModel)] with Reactive forms. This will a completely different directive than the one that would be used without the formControlName . With reactive forms, it will be the FormControlNameDirective . Without the formControlName , the NgModel directive would be used.
You can basically specify that the ngModel you are using is standalone. And use something like this
<input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
