如何在角数符号“#”中验证模板驱动的表单

Question

大家好？如果有值，我如何验证#permissionInput，顺便说一句，这是有角度的。

  <input
                          #permissionInput
                          type="text"
                          class="col dropdown"
                          placeholder="Select permission group ..."
                          (focus)="onFocus(dropdownContent)"
                          (blur)="onBlur()"
                          (input)="onInput(permissionInput.value)"
                          [ngClass]="{ 'is-invalid': pGroup.invalid && (pGroup.dirty || pGroup.touched) }"
                        />

 <small
                      *ngIf="permissionInput.value.invalid && (permissionInput.value.dirty || permissionInput.value.touched)"
                      class="form-text text-muted danger invalid-feedback1 ml-1"
                    >
                      <div *ngIf="permissionInput.value.errors.required">
                        Name is required.
                      </div>
                    </small>

``

Answer 1

你可以这样做：

<input
    #permissionInput="ngModel"
    type="text"
    required
    class="col dropdown"
    placeholder="Select permission group ..."
    (focus)="onFocus(dropdownContent)"
    (blur)="onBlur()"
    [ngModel]="somevariable"
    (ngModelChange)="onInput(permissionInput.value)"
    [ngClass]="{ 'is-invalid': pGroup.invalid && (pGroup.dirty || pGroup.touched) }"
/>
<small
    *ngIf="permissionInput.errors && (permissionInput.value.dirty || permissionInput.value.touched)"
    class="form-text text-muted danger invalid-feedback1 ml-1"
>
    <div *ngIf="permissionInput.errors.required">
        Name is required.
    </div>
</small>

somevariable: string;

onInput(value: string) {
   ...
   this.somevariable = value;
}

要使输入在没有值时引发错误，您需要在输入中添加required。 你也可以使用permissionInput.errors而不是permissionInput.value.errors来访问errors。