在不使用 FormControls 和 NgModel 的情况下将值修补到 Angular 文本框

Question

我是 Angular 的新手我需要在页面加载时不使用 FormControls 和 NgModel 将值修补到文本框

这是我的代码

calendar;

 <input type="date" (change)="customCalanderStartDateHandler($event)"  >



customCalanderStartDateHandler(event) {

    const option = event.target.value;

    const convertDate = new Date(option);
   
    this.calendar = convertDate;
  }

我寻求你的帮助来解决这个问题。如果我需要添加任何属性或字段或其他内容，请告诉我

Answer 1

你可以使用viewChild Decorator with Angular Date管道

组件html文件(.html)

<input #dateControl type="date" (change)="customCalanderStartDateHandler($event)"  >

组件打字稿文件(.ts)

@ViewChild('dateControl') input: ElementRef;
datePipe = new DatePipe('en-US');

customCalanderStartDateHandler(event) {
 const controlValue = event.target.value;
 const todayDate = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
 this.input.nativeElement.value = todayDate;
 console.log(this.input.nativeElement.value);
}

Answer 2

尝试绑定值属性

//.html
<input type="text" value={{datePatcher}} (change)="customCalanderStartDateHandler($event)"/>

//.ts
public datePatcher ="2/11/1999";

Answer 3

您不应直接更改输入的值，因为 Angular 保持 DOM 对象和“视图”同步。

所以，使用Renderer2来正确更新它。

<input #dateInput type="date" (change)="customCalanderStartDateHandler($event)"  >

@ViewChild('dateInput') input: ElementRef;


constructor(private renderer: Renderer2) {}


customCalanderStartDateHandler(event) {
    const convertDate = this.getConvertedDate() // Get date
    this.renderer.setValue(this.input.nativeElement, convertDate)
}

在这里查看 post 关于使用 Renderer2 https://www.tektutorialshub.com/angular/renderer2-angular/

在不使用 FormControls 和 NgModel 的情况下将值修补到 Angular 文本框

Patch Value to Angular text box without using FormControls and NgModel

textbox

angular

angular11