我如何获得 Angular 输入字段值？

Question

I successfully passed data to my form input field like below.

<div class="input" >
      <mat-form-field appearance="outline" class="input-text">
      <mat-label>Name</mat-label>
      <input matInput placeholder="" style=" width: 100%;" value="{{userDetail.name}}"  >
      </mat-form-field>
    </div>

Output without formControl

I want to update and get this input field value to update the database. So I used "formControl" to get the input field value.

 [formControl]="nameControl" 

But when I add this property I can't see the input field value. How I get this input field value? Output with formControl

Answer 1

you can has a FormControl

control=new FormControl()

<!--see that not use value and use [formControl]-->
<input matInput placeholder="" style=" width: 100%;" [formControl]="control">

And then, you can give value when create the control

control=new FormControl('my value')

or using setValue

this.control.setValue('my value')

or you can has a formGroup and inside a FromControl

form=new FormGroup({
  control:new FormControl();
}))

<form [formGroup]="form">
  <!--see that not use value else FormControlName (without [])-->
  <input matInput placeholder="" style=" width: 100%;" formControlName="control">
</form>

Again, you can give value when create the form

form=new FormGroup({
  control:new FormControl('my value');
}))

or using setValue

this.form.setValue({control:'my value'}) //to all the form
//or
this.form.get('control').setValue('my value') //only to the control of the formControl
//you can also using patchValue
this.form.patchValue({control:'my value'}) //to all the form

Answer 2

value="{{userDetail.name}}"

interpolation on attribute it's a bad practice: You should to use angular attribute and property binding instead:

• https://angular.io/guide/attribute-binding
• https://angular.io/guide/property-binding

---

How I get this input field value?

Angular provides two different approaches to handling user input through forms: reactive and template-drive.

template-drive

public name: string;

<input matInput placeholder="" style=" width: 100%;" [(ngModel)]="name" />

reactive

public nameControl = new FormControl();

<input matInput placeholder="" style=" width: 100%;" [formControl]="nameControl" />

---

in both cases, if you want to set an initial value, you have to do it yourself by operating on the field

template-drive

public name = "initial name";

or

myMethod(): void {
    this.name = "initial name";
}

reactive

public nameControl = new FormControl("initial name");

or

myMethod(): void {
    this.nameControl.setValue("initial name");
}

For more info about input binding, you can visit the official Angular documentation: https://angular.io/guide/forms-overview

Answer 3

I successfully passed data to my form input field like below.

<div class="input" >
      <mat-form-field appearance="outline" class="input-text">
      <mat-label>Name</mat-label>
      <input matInput placeholder="" style=" width: 100%;" value="{{userDetail.name}}"  >
      </mat-form-field>
    </div>

Output without formControl

I want to update and get this input field value to update the database. So I used "formControl" to get the input field value.

 [formControl]="nameControl" 

But when I add this property I can't see the input field value. How I get this input field value? Output with formControl