Question

我一直在对此进行一些研究，但仍然找不到我想要的东西。我有一个表格，想捕捉触摸事件。我的代码如下：

pos = "pos"

如果我要输入一个值，则可以控制该值，但是当我触摸一个字段时，我希望能够显示类似“字段已被触摸”的消息。

Answer 1

@Component({
  selector: 'my-custom-form-component',
  templateUrl: './custom-form-component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: MyCustomFormComponent,
    multi: true
  }]
})
export class MyCustomFormComponent implements ControlValueAccessor, DoCheck {

  private control: AbstractControl;

  private pristine = true;


  ngDoCheck (): void {
    if (this.pristine !== this.control.pristine) {
      this.pristine = this.control.pristine;
      if (this.pristine) {
        console.log('Marked as pristine!');
      }
    }
  }

}

这是我发现的。这也应该适用于触摸。

有关更多信息，https://github.com/angular/angular/issues/17736

Answer 2

当用户单击字段，输入值，按Enter键或退出字段时，可以根据需要具体使用输入事件来调用函数。

<input #textfield 
(keyup.enter)="onEnter(textfield.value)" 
(blur)="onBlur(textfield.value)"
>

onEnter(value) {
console.log("User entered this: ",value);
}

onBlur(value) {
console.log("User existed field: ",value);
}

Answer 3

如果您使用的是ReactiveForms，请检查文档：

https://angular.io/api/forms/AbstractControl

它具有一些属性，可用于确定输入是否为touched。

Answer 4

您应该使用reactive forms。此示例检查是否触摸了表单输入，以及用户是否在其上输入了值。

在组件html上，您可以执行以下操作。

 <form [formGroup]="sampleform">
       <label>Sample *:</label>
         <div class="input-group">
           <input formControlName="name" placeholder="type here">
         </div>
         <div *ngIf="!sampleform.controls['name'].valid && sampleform.controls['name'].touched">This field is required.</div>
       </div>
    </form>

然后在您的component.ts上，初始化您的反应形式。不要忘记在component.ts上导入所需的依赖项。

    import { FormBuilder, FormGroup, Validators } from '@angular/forms';

    .
    .
    .
    constructor(private formBuilder: FormBuilder){ }

    sampleForm: FormGroup = this.formBuilder.group({
      name: [null, Validators.required],
    })

最重要的是，在模块上导入所需的模块。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

.
. 
imports: [
    .
    .
    FormsModule,
    ReactiveFormsModule
  ],

Answer 5

您可能想看看ng-touched CSS类，并尝试这样做。您可以将其与表单参考结合使用，以检查表单状态。我记得用它来进行表单验证。可能不是您要购买的东西，它可能会为您指明正确的方向。

在我的CSS中：

input.ng-invalid.ng-touched {
  border: 1px solid red;
}

检查何时以倾斜的角度触摸字段？

5 个答案: