Hi I want to have prefilled form in Angular2 and not allow users to change the prefilled data. I just want to post this prefilled data to server (the data is automatically derived from currently logged in user's information).
How can I achieve this?
my code.
<form [formGroup]="requestForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label class="fontstyle1"><span class="fontstyle2">STEP2. </span>User Information</label>
<div class="form-group">
<label class="fontstyle3">Name</label>
<input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" formControlName="name"[(ngModel)]="selected_name" value="user.name">
</div>
<div class="form-group">
<label class="fontstyle3">E-mail</label>
<input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" formControlName="email" [(ngModel)]="selected_email" value="user.email">
</div>
<div class="form-group">
<label class="fontstyle3">Phone</label>
<input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" formControlName="phone" [(ngModel)]="selected_phone" value="user.phone">
</div>
<br>
<button type="submit" id="request-btn">Request</button>
</div>
When I run this, the result is neither unchangeable nor prefilled.
Help!
Thank you !
Try to use either formControlName or ngModel, And also disable the input fields.
<form [formGroup]="requestForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label class="fontstyle1"><span class="fontstyle2">STEP2. </span>User Information</label>
<div class="form-group">
<label class="fontstyle3">Name</label>
<input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" [(ngModel)]="user.name" disabled>
</div>
<div class="form-group">
<label class="fontstyle3">E-mail</label>
<input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" [(ngModel)]="user.email" disabled>
</div>
<div class="form-group">
<label class="fontstyle3">Phone</label>
<input *ngFor="let user of currentUser | getValues | slice:1:2" type="text" required class="form-control" [(ngModel)]="user.phone" disabled>
</div>
<br>
<button type="submit" id="request-btn">Request</button>
</div>
</div>
</form>
And in your component on ngOnInit set the data to form
ngOnInit(){
this.apicall.subscribe((info)=>{
this.currentUser = info;
}
);
}