我无法使用角度

Question

我无法在输入字段和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>

Answer 1

初始化表单组时可以设置表单输入的默认值。

@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>

将设置默认值，您可以在不触摸表单的情况下发布表单。