使用反应表单示例应用程序,我添加了 curr_date 表单控件,该控件具有一个管道,可以将日期格式化为所需的格式。在ts文件中,表单组具有curr_date属性,该属性具有不同格式的预设值。
<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>
在 ts 文件中,我添加了 curr_date 表单控件,如下所示:
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('')
])
});
这是我注意到的,
该元素具有 FormControlName 属性,并且日期未按照日期管道进行格式化
FormControlName 属性已从元素中删除,并且日期现在按照日期管道进行格式化
非常感谢任何解决此问题的帮助。谢谢!
可能超级简单
将其更改为
您不必处理任何类型的转换或其他任何事情。
另外,只能使用
formControlName
或,value
但不能同时使用两者。如果您构建了反应式表单,请在 TS 中设置值,而不是在 HTML 中。