Question

我想在提交表单之前获取formControlName输入标签值。因此，我创建了一种获取值的方法。但是我无法获取formControlName的当前输入值。

我删除了formcontrolname以便从表单中排除，以仅获取ngmodel输入值，但我收到错误消息，认为表单应具有formcontrolname。.

<form [formGroup]="FormGroup1" (ngSubmit)="onSubmit()">
 ...
 <input type="text" formControlName="searchContent" [(ngModel)]="search"/>
<button  type="button" (click)=getValue(search)></button>
 ...
 </form>

在打字稿中，我已经这样初始化

 FormGroup1: FormGroup;
    FormGroup1: FormGroup;  
     this.FormGroup1= new FormGroup({                           
       .....
      searchContent: new FormControl(),
      ...
     });

在不提交表单的情况下，我需要此输入当前值。

Answer 1

您可以通过以下方式监听控制值的变化：

import { FormBuilder } from '@angular/forms';

// imports and decorator

formGroup = this.fb.group({
  // other fields
  searchContent: [''],
});

constructor(private fb: FormBuilder) {}

this.formGroup.controls.searchContent.valueChanges.subscribe(value => {
    // do stuff
});

// Getting the value of a field
submit() {
 const searchValue = this.formGroup.controls.searchContent.value;
}

使用camelCase更好地处理打字稿中的变量（formGroup而不是FormGroup）

Answer 2

您可以尝试以下方法：

this.formGroup1.controls.get['searchContent'].valueChanges.subscribe(va‌lue => {
   //do something
}

Answer 3

如果您不必监视输入更改，而只想在特定点（即在提交表单之前）获取值，则可以使用模板变量。

<form [formGroup]="FormGroup1" (ngSubmit)="onSubmit()">
 ...
 <input #searchInput type="text" formControlName="searchContent" [(ngModel)]="search"/>
 <button  type="button" (click)=getValue(searchInput)></button>
 ...
</form>


@Component()
class MyComponent{
  getValue(searchInput) {
    console.log(searchInput.nativeElement.value);
  }
}

这是最简单的解决方案，如果您不想将searchInput从模板传递到组件的代码，也可以使用@ViewChild（）。

只需使用formControlName的东西，您的代码应如下所示：

HTML：

<form [formGroup]="FormGroup1" (ngSubmit)="onSubmit()">
 ...
 <input type="text" formControlName="searchContent">
 <button  type="button" (click)=getSearchValue()></button>
 ...
</form>

TYPESCRIPT：

class MyComponent {
   FormGroup1: FormGroup;  
   constructor() {
     this.FormGroup1 = new FormGroup({
       searchContent: new FormControl('')
     }); 
   }

   getSearchValue() {
     console.log(this.FormGroup1.get('searchContent').value);
   }
}

此外，只需确保在声明该组件的模块中导入了ReactiveFormsModule。

Answer 4

我在表单中添加了另一种表单，

<form [formGroup]="FormGroup1" (ngSubmit)="onSubmit()">
 ...
<div [formGroup]="searchFormGroup">
 <input type="text" formControlName="searchContent" [(ngModel)]="search"/>
<button  type="button" (click)=getValue(search)></button>
</div>
 ...
 </form>

在打字稿中声明

this.searchFormGroup = new FormGroup({ searchContent: new FormControl()});

然后我在formGroup1中删除了searchContent变量。.现在可以正常工作了。

以angular6形式排除输入formControlName

4 个答案: