Question

我正在使用 Angular 版本 6.0.7 。

我有四个<input>字段，仅在提供第一个字段的情况下才需要最后三个字段。我正在尝试使用[attr.required]="<boolean here>"和[required]="<boolean here>"使其工作，但是当绑定值为false时，必填属性不会从输入中删除。

<div class="col">
    <h3 class="mb-3">Ensino superior</h3>
    <div class="form-group">
      <label for="ad-higher-education-institution">Nome da instituição</label>
      <input
        [(ngModel)]="client.academic_data.higher_education.institution"
        id="ad-higher-education-institution"
        name="ad-higher-education-institution"
        type="text"
        class="form-control">
    </div>
    <div class="row">
      <div class="col form-group">
        <label for="ad-higher-education-city">Cidade</label>
        <input
          [(ngModel)]="client.academic_data.higher_education.city"
          [attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
          id="ad-higher-education-city"
          name="ad-higher-education-city"
          type="text"
          class="form-control">
      </div>
      <div class="col form-group">
        <label for="ad-higher-education-state">Estado</label>
        <input
          [(ngModel)]="client.academic_data.higher_education.state"
          [attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
          id="ad-higher-education-state"
          name="ad-higher-education-state"
          type="text"
          class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="ad-higher-education-course">Curso</label>
      <input
        [(ngModel)]="client.academic_data.higher_education.course"
        [attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
        id="ad-higher-education-course"
        name="ad-higher-education-course"
        type="text"
        class="form-control">
    </div>
    <div class="form-group">
      <label for="ad-high-school-conclusion-year">Ano de conclusão</label>
      <input
        [(ngModel)]="client.academic_data.higher_education.conclusion_year"
        [attr.required]="client.academic_data.higher_education.institution && client.academic_data.higher_education.institution.length > 0"
        id="ad-higher-education-conclusion-year"
        name="ad-higher-education-conclusion-year"
        type="text"
        class="form-control"
        mask="0*">
    </div>
  </div>
</div>

在未填写第一个输入时如何删除required属性？

这是第一个填满时的输入：

<input 
  class="form-control ng-valid ng-dirty ng-touched" 
  id="ad-higher-education-city" name="ad-higher-education-city" type="text" ng-reflect-name="ad-higher-education-city" ng-reflect-model="" 
  required="true">

这是第一个未填写的输入：

<input 
  class="form-control ng-valid ng-dirty ng-touched" 
  id="ad-higher-education-city" name="ad-higher-education-city" type="text" ng-reflect-name="ad-higher-education-city" ng-reflect-model="" 
  required>

Answer 1

您应该只使用[required]，而不要使用[attr.required]。

几年前，this pull request中增加了对直接绑定到required的支持。

Answer 2

要解决此问题，您只需要使用三元表达式，如果为false则返回null。

[required]="client.academic_data.higher_education.institution ? true : null"

将null更改为必需属性将从输入中排除。

值为false时，必需的绑定和必需的attr.required无法正常工作

2 个答案: