我拼命地寻找几个小时,用ngif把一个简单的必填字段div放到我的各种表单控件上。 typescript :
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators,FormArray, FormBuilder} from '@angular/forms';
@Component({
selector: 'app-chargement-du-questionnaire',
templateUrl: './chargement-du-questionnaire.component.html',
styleUrls: ['./chargement-du-questionnaire.component.css']
})
export class ChargementDuQuestionnaireComponent {
i: number = 0;
errorMessage: string="";
credit: FormGroup= new FormGroup({
typeDePret: new FormControl(''),
montantDuPret: new FormControl(''),
tauxDuPret: new FormControl(''),
dureeDuPret: new FormControl(''),
dontDiffere: new FormControl(''), });
constructor(private fb: FormBuilder) { }
profileForm = this.fb.group({
credit: this.fb.group({
typeDePret: [''],
montantDuPret: [Validators.required,Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
tauxDuPret: [''],
dureeDuPret: [''],
dontDiffere: [''],
}),
aliases: this.fb.array([
this.fb.control('')
])
});
ngOnInit() {
this.credit = new FormGroup({
typeDePret: new FormControl(''),
montantDuPret: new FormControl(Validators.required),
tauxDuPret: new FormControl(''),
dureeDuPret: new FormControl(''),
dontDiffere: new FormControl(''), });}
get montantDuPret() { return this.credit.get('montantDuPret')! }
get aliasArray() {
return this.profileForm.get('aliases') as FormArray;
}
addAlias() {
if (this.aliasArray.length === 3) {
this.errorMessage="Limiter à 3 prêts";
setTimeout(() => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}, 10);
} else {
this.errorMessage = "";
this.aliasArray.push(this.fb.control(''));
setTimeout(() => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}, 10);
}
}
removeAlias(index: number) {
if (this.aliasArray.length === 3) {
this.errorMessage="";
}
this.aliasArray.removeAt(index);
}
}
和html:
<form [formGroup]="profileForm"class="needs-validation" novalidate>
<div formArrayName="aliases">
<div class="form" *ngFor="let alias of aliasArray.controls; let i=index">
<p> Pret n°{{i+1}}</p>
<div>
<label for="typeDePret-{{ i}}">Type de prêt:</label><br>
<select class="form-select" aria-label="Default select example"id="typeDePret-{{ i }}" [formControlName]="i">
<option value="1">Prêt classique (amortissable)</option>
<option value="2">In fine</option>
<option value="3">Prêt à taux Zéro</option>
<option value="4">Prêt relais</option>
</select>
</div>
<label for="montantDuPret-{{i}}">Montant du prêt</label><br>
<div class="input-group mb-3">
<input id="montantDuPret-{{i}}" type="text" [formControlName]="i" class="form-control" aria-label="Amount (to the nearest dollar)"formControlName="montantDuPret" id="montantDuPret"required>
<span class="input-group-text">.00 €</span>
<div class="invalid-feedback" *ngIf="montantDuPret.invalid && montantDuPret.touched">
<div *ngIf="montantDuPret.errors?.['required']">
Svp entrer le montant de votre pret.
</div>
</div>
</div>
<label for="tauxDuPret-{{i}}">Taux du prêt</label><br>
<div class="input-group mb-3">
<input id="tauxDuPret-{{i}}" type="text" [formControlName]="i" class="form-control" aria-label="Amount (to the nearest dollar)"formControlName="tauxDuPret" id="tauxDuPret"required>
<span class="input-group-text">%</span>
</div>
<label for="dureeDuPret-{{i}}">Durée totale</label><br>
<div class="input-group mb-3">
<input id="dureeDuPret-{{i}}" type="text" [formControlName]="i" class="form-control" aria-label="Amount (to the nearest dollar)"formControlName="dureeDuPret" id="dureeDuPret"required>
<span class="input-group-text">an(s)</span>
<input id="dureeDuPret-{{i}}" type="text" [formControlName]="i" class="form-control" aria-label="Amount (to the nearest dollar)"formControlName="dureeDuPret" id="dureeDuPret"required>
<span class="input-group-text">mois</span>
</div>
<label for="dontDiffere-{{i}}">Dont différé</label><br>
<select class="form-select" aria-label="Default select example"id="dontDiffere{{i}}" [formControlName]="i">
<option value="1">1 mois</option>
<option value="2">2 mois</option>
<option value="3">3 mois</option>
<option value="4">4 mois</option>
<option value="5">5 mois</option>
<option value="6">6 mois</option>
<option value="7">7 mois</option>
<option value="8">8 mois</option>
<option value="9">9 mois</option>
<option value="10">10 mois</option>
<option value="11">11 mois</option>
<option value="12">12 mois</option>
<option value="13">13 mois</option>
<option value="14">14 mois</option>
<option value="15">15 mois</option>
<option value="16">16 mois</option>
<option value="17">17 mois</option>
<option value="18">18 mois</option>
<option value="19">19 mois</option>
<option value="20">20 mois</option>
<option value="21">21 mois</option>
<option value="22">22 mois</option>
<option value="23">23 mois</option>
<option value="24">24 mois</option>
</select>
</div>
</div>
<div class="error"*ngIf="errorMessage">{{errorMessage}}</div>
<button (click)="removeAlias(i)">Remove Alias</button>
<button type="button" (click)="addAlias()">+ Add another alias</button>
</form>
我尝试了Angular 网站上描述的方法,但我没有渲染。。如果字段没有填充,就不会创建div。
我专注于"montantdupret"表单控件来做我的测试,告诉自己如果它能与一个表单控件一起工作,那么解决方案对其他表单控件也是一样的。
1条答案
按热度按时间gupuwyp21#
您的
montantDuPret
指向this.credit.get('montantDuPret')
,这不是您所期望的。将条件更改为下面的代码,它将很好地运行。
参考:stackblitz