Usando o aplicativo de amostra de formulários reativos, adicionei o controle de formulário curr_date, que possui um canal para formatar a data no formato desejado. No arquivo ts, o grupo de formulários possui a propriedade curr_date que possui um valor predefinido em formato diferente.
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<label for="first-name">First Name: </label>
<input id="first-name" type="text" formControlName="firstName" required>
<label for="last-name">Last Name: </label>
<input id="last-name" type="text" formControlName="lastName">
<label for="zip">Date: </label>
** <input id="curr_date" type="text" formControlName="curr_date" [value]="profileForm.value.curr_date | date: 'MM/dd/yyyy'">**
<div formGroupName="address">
<h2>Address</h2>
<label for="street">Street: </label>
<input id="street" type="text" formControlName="street">
<label for="city">City: </label>
<input id="city" type="text" formControlName="city">
<label for="state">State: </label>
<input id="state" type="text" formControlName="state">
<label for="zip">Zip Code: </label>
<input id="zip" type="text" formControlName="zip">
</div>
<div formArrayName="aliases">
<h2>Aliases</h2>
<button type="button" (click)="addAlias()">+ Add another alias</button>
<div *ngFor="let alias of aliases.controls; let i=index">
<!-- The repeated alias template -->
<label for="alias-{{ i }}">Alias:</label>
<input id="alias-{{ i }}" type="text" [formControlName]="i">
</div>
</div>
<p>Complete the form to enable button.</p>
<button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>
<hr>
<p>Form Value: {{ profileForm.value | json }}</p>
<p>Form Status: {{ profileForm.status }}</p>
<button type="button" (click)="updateProfile()">Update Profile</button>
No arquivo ts, adicionei curr_date formcontrol da seguinte forma:
export class ProfileEditorComponent {
profileForm = this.fb.group({
firstName: ['', Validators.required],
lastName: [''],
curr_date: ['2008-03-28T00:00:00', Validators.required],
address: this.fb.group({
street: [''],
city: [''],
state: [''],
zip: [''],
}),
aliases: this.fb.array([
this.fb.control('')
])
});
Aqui está o que eu notei,
O elemento tem o atributo FormControlName e a data não está formatada de acordo com o pipe de data
Qualquer ajuda para resolver este problema é muito apreciada. Obrigado!