Question

我正在尝试使用一个元素<input>中的自定义验证指令的输出来控制另一个元素<p>的显示，但无法弄清楚如何使其工作。这是我到目前为止的内容：

自定义指令（no-special-chars-directive.ts）

import { Directive } from '@angular/core';
import { Validator, 
        FormControl, 
        NG_VALIDATORS, 
        ValidationErrors} from "@angular/forms";

@Directive({
  selector: '[appNoSpecialChars]',
  providers: [{provide: NG_VALIDATORS, useExisting: NoSpecialCharsDirective, multi: true}],
  exportAs: 'noSpecChars'
})
export class NoSpecialCharsDirective implements Validator{

  constructor() { }
  validate(c: FormControl): ValidationErrors {
    //console.log("input value: " + c.value);
    const hasSpecialChars = /[~!@#\^&*+=\-\[\]\';,/{}|\":<>\?\\()]/.test(c.value);
    const message = {
      'hasSpecialChars' : {
        'message': 'No Special Chars Allowed'
      }
    };
    return hasSpecialChars ? message : null;
  }
}

这是模板：（git-search.component.html）

<h3>{{title}} - {{displayQuery}} -- (version: Template Driven)</h3>
<form #myForm="ngForm" (ngSubmit)="sendQuery()">
  <div *ngFor="let key of modelKeys">
      {{key}} 
      <input  #myInput name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" required *ngIf="key==='q'" appNoSpecialChars/>
      <input  #myInput name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" minlength = '2' maxlength='4' *ngIf="key==='stars'" appNoSpecialChars />      
      <input  #myInput name="{{key}}" placeholder="Enter {{key}} Here" [(ngModel)]="model[key]" *ngIf="key!=='q' && key!=='stars'" appNoSpecialChars/> 
      <p *ngIf="!myForm[key].valid" >Not valid</p> 
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button> 
</form>

我希望<p>元素在前面的<input>中存在无效输入时有选择地显示。我已经为*ngIf语句和输入本身尝试了多种排列，但是还没有找到任何可行的方法。在开始使用<p>元素的可选显示之前，一切工作正常。有什么想法吗？

Answer 1

更改行

<p *ngIf="!myForm[key].valid" >Not valid</p>

到

<p *ngIf="!myForm.form.get(key)?.valid" >Not valid</p>

myForm.form获取默认值/仅在您的情况下，FormGroup保存所有FormControls。

?就像一个特殊的空合并运算符（Why we use "?" operator in template binding in angular 2），可以防止在myForm.form.get(key)为NULL的情况下发生错误。

您可以在这里https://stackblitz.com/edit/angular-liqgux

看到它的运行情况

使用自定义指令值来可选地显示表单元素

1 个答案: