我无法在输入字段和textarea中设置默认值
我试图为fname和lname设置值，但是当我运行它时没有效果。
我在html文件中尝试使用[value] =“vignesh”获取fname，但是当我提交它但是this.edit_profile_form.value.fname返回一个空字符串
请提前帮助我... !!
import {Component, OnInit, ViewContainerRef} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {HomeComponent} from "../../home.component";
import {HomeService} from "../../../../service/home.service";
import {ToastsManager} from "ng2-toastr";
@Component({
selector: 'app-profile-edit',
templateUrl: './profile-edit.component.html',
styleUrls: ['./profile-edit.component.css']
})
export class ProfileEditComponent implements OnInit {
edit_profile_form:FormGroup;
constructor(public toastr: ToastsManager, vcr: ViewContainerRef,private formBuilder:FormBuilder,public _home:HomeComponent,public _homeService:HomeService) {
this.toastr.setRootViewContainerRef(vcr);
}
ngOnInit() {
this.set_data();
}
set_data(){
this.edit_profile_form = this.formBuilder.group({
fname: new FormControl("Vignesh",[ Validators.minLength(4)]),
lname: new FormControl(null,[ Validators.minLength(4)]).setValue("vignesh"),
phone: new FormControl(null),
address: new FormControl(null,[ Validators.minLength(20),Validators.maxLength(70)]),
description: new FormControl(null,[Validators.minLength(20),Validators.maxLength(70)]),
github:new FormControl(null,[]),
linkedin:new FormControl(null,[]),
alternate_email: new FormControl(null,[ Validators.email]),
});
this.edit_profile_form.controls['fname'].setValue(this._home.user_details.first_name);
}
onSubmit(){
this._homeService.update_profile(this.edit_profile_form.value.fname,
this.edit_profile_form.value.lname,
this.edit_profile_form.value.phone,
this.edit_profile_form.value.address,
this.edit_profile_form.value.description,
this.edit_profile_form.value.github,
this.edit_profile_form.value.linkedin,
this.edit_profile_form.value.alternate_email)
.subscribe(
(data:any[]) => {
if(data[0].d==="success")
{
this.toastr.success('User profile updated successfully.', 'Profile Updated', {positionClass:"toast-bottom-right"});
}
else
{
this.toastr.error('User profile update failed', 'Profile update Failed', {positionClass:"toast-bottom-right"});
}
});
}
}
我的HTML代码
<div class="container-fluid">
<div style="background-color: white;padding: 2%">
<div>
<div class="row">
<div class="col-md-3">
<p style="font-size: 1.5em;padding-left: 10%">Edit profile</p>
</div>
</div>
</div>
<div class="panel-body">
<div id="main_user_content">
<form [formGroup]="edit_profile_form" #edit_profile="ngForm" (ngSubmit)="onSubmit(edit_profile.value)" novalidate>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="fname" type="text" class="form-control" name="fname"
formControlName="fname"
placeholder="First Name" ngModel>
</div>
<div *ngIf="edit_profile_form.controls['fname'].errors && (edit_profile_form.controls['fname'].dirty||edit_profile_form.controls['fname'].touched)">
Please enter Your First name
</div>
</div>
</div>
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="lname" type="text" class="form-control" name="lname"
formControlName="lname"
placeholder="Last Name" ngModel>
</div>
<div *ngIf="edit_profile_form.controls['lname'].errors && (edit_profile_form.controls['lname'].dirty||edit_profile_form.controls['lname'].touched)">
Please enter Your Last name
</div>
</div>
</div>
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input id="phone" type="text" class="form-control" name="phone"
formControlName="phone"
placeholder="Phone" ngModel maxlength="10">
</div>
<div *ngIf="edit_profile_form.controls['phone'].errors && (edit_profile_form.controls['phone'].dirty||edit_profile_form.controls['phone'].touched)">
<div *ngIf="edit_profile_form.controls['phone'].hasError('minLength')">
<div *ngIf="!(edit_profile_form.controls['phone'].hasError('required'))"
class="alert alert-danger">
Please valid phone number
</div>
</div>
<div *ngIf="edit_profile_form.controls['phone'].hasError('maxLength')">
<div *ngIf="!(edit_profile_form.controls['phone'].hasError('required'))"
class="alert alert-danger">
Please valid phone number
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<textarea cols="40" rows="3" id="address" type="text" class="form-control" name="address"
formControlName="address"
placeholder="Address" ngModel></textarea>
</div>
<div *ngIf="edit_profile_form.controls['address'].errors && (edit_profile_form.controls['address'].dirty||edit_profile_form.controls['address'].touched)">
<div *ngIf="edit_profile_form.controls['address'].hasError('required')"
class="alert alert-danger">
Please enter Your Address
</div>
<div *ngIf="edit_profile_form.controls['address'].hasError('minLength')">
<div *ngIf="!(edit_profile_form.controls['address'].hasError('required'))"
class="alert alert-danger">
Please valid address of length greater than 20
</div>
</div>
<div *ngIf="edit_profile_form.controls['address'].hasError('maxLength')">
<div *ngIf="!(edit_profile_form.controls['address'].hasError('required'))"
class="alert alert-danger">
Please valid address of length less than 70
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-comment"></i></span>
<textarea cols="40" rows="3" id="description" type="text" class="form-control" name="description"
formControlName="description"
placeholder="Description" ngModel></textarea>
</div>
<div *ngIf="edit_profile_form.controls['description'].errors && (edit_profile_form.controls['description'].dirty||edit_profile_form.controls['description'].touched)">
<div *ngIf="edit_profile_form.controls['description'].hasError('required')"
class="alert alert-danger">
Please enter Your Description
</div>
<div *ngIf="edit_profile_form.controls['description'].hasError('minLength')">
<div *ngIf="!(edit_profile_form.controls['description'].hasError('required'))"
class="alert alert-danger">
Please valid description of length greater than 20
</div>
</div>
<div *ngIf="edit_profile_form.controls['description'].hasError('maxLength')">
<div *ngIf="!(edit_profile_form.controls['description'].hasError('required'))"
class="alert alert-danger">
Please valid description of length less than 70
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input id="github" type="text" class="form-control" name="github"
formControlName="github"
placeholder="Github URL Eg:https://github.com/mike" ngModel>
</div>
<div *ngIf="edit_profile_form.controls['github'].errors && (edit_profile_form.controls['github'].dirty||edit_profile_form.controls['github'].touched)">
<div *ngIf="edit_profile_form.controls['github'].hasError('required')"
class="alert alert-danger">
Please enter the Github URL
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input id="linkedin" type="text" class="form-control" name="linkedin"
formControlName="linkedin"
placeholder="Linkedin URL Eg:https://linkedin.com/mike" ngModel>
</div>
<div *ngIf="edit_profile_form.controls['linkedin'].errors && (edit_profile_form.controls['linkedin'].dirty||edit_profile_form.controls['linkedin'].touched)">
<div *ngIf="edit_profile_form.controls['linkedin'].hasError('required')"
class="alert alert-danger">
Please enter the Linkedin URL
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 5%">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="alternate_email" type="text" class="form-control" name="alternate_email"
formControlName="alternate_email"
placeholder="Alternate Email" ngModel [value]="">
</div>
<div *ngIf="edit_profile_form.controls['alternate_email'].errors && (edit_profile_form.controls['alternate_email'].dirty||edit_profile_form.controls['alternate_email'].touched)">
<div *ngIf="edit_profile_form.controls['alternate_email'].hasError('required')"
class="alert alert-danger">
Please enter the Alternate Email address
</div>
<div *ngIf="edit_profile_form.controls['alternate_email'].hasError('email')">
<div *ngIf="!(edit_profile_form.controls['alternate_email'].hasError('required'))"
class="alert alert-danger">
Please valid Alternate email address
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-4">
<button type="submit" class="btn btn-primary" >Invite</button>
</div>
<div class="col-md-1 col-md-offset-1">
<button type="button" class="btn btn-default" >Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
初始化表单组时可以设置表单输入的默认值。
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
formGroup: FormGroup;
numberFormControl: FormControl;
ngOnInit() {
this.createForm();
}
private createForm() {
this.numberFormControl = new FormControl();
// Set 2 as the default for the number input field
this.numberFormControl.setValue(2);
this.formGroup = new FormGroup({
numberField: this.numberFormControl
});
}
}
在组件的模板中，您所需要做的只是：
<form [formGroup]="formGroup">
<input type="number" formControlName="numberField"/>
</form>
将设置默认值，您可以在不触摸表单的情况下发布表单。