Javascript 值为false时，Binding required和attr.required未按预期工作

我正在使用Angular版本6.0.7

我有四个

字段，其中只有在提供第一个字段时才需要最新的三个字段。我试图通过使用

[attr.required]=“

和

[required]=“

使其工作，但绑定值为false时，不会从输入中删除required属性

<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>

这是第一个未填充时的输入：

<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>

---

您应该只使用

[required]

，而不是

[attr.required]

---

几年前就添加了对直接绑定到

required

的支持。

要解决这个问题，您只需要使用一个三元表达式，在false的情况下返回null

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

---

返回null所需的属性将从输入中排除。

我现在尝试了，结果相同。属性是必需的。请参阅-使用三元表达式，如

[attr.required]=“（client.academic\u data.higher\u education.institute&&client.academic\u data.higher\u education.institute.length>0）？true:null“

谢谢，@eric99！！！使用带有null的三元表达式可以正常工作。你想发布答案吗？

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