当值为false时，Binding required和attr.required无法按预期工作

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

在几年前的这个pull请求中添加了对直接绑定到required的支持。

Answer 2

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

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

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