如何将 FormControl 与 p-calendar 一起使用并覆盖占位符

Question

Here 是我正在浏览的表单控件列表：

我有两种模式（单选按钮）True 和 False。两者都适用于一个p-calendar:

<p-calendar
  [formControl]="startFormControl"
  [(ngModel)]="startValue"
  placeholder="MM-DD-YYYY">
</p-calendar>

如果模式为假，则该字段不可编辑，即只读。但是当模式更改为 true 时，相同的日历应该是可编辑的。我能做到的就这么多。但我的占位符没有被实际日期取代。这是我的逻辑：

startDatePlaceholder= new Date();
startValue;

ngOnChanges() {
    console.log("changed detected");
    this.startValue=this.startDatePlaceholder;
    this.startFormControl.valueChanges.subscribe(value => {
        this.startValue = value ;
        console.log("changed value ", value); // Output: NULL
    });
}

问题是值没有被改变，这就是它抛出 null 的原因。请在这里提出建议。

P.S：实际代码太复杂，无法在 stackblitz 或 plunker 上重新创建。

Answer 1

我在 StackBlitz 重新创建了场景。

您可以简单地 enable/disable 单选按钮的 change 事件上的日历。

你可以看到我已经在你的模式（单选按钮选择）更改时将日期记录到控制台中。日期在任何时候都不会变为空。

因此，您不需要使用占位符。

Answer 2

所以，我预计，您的主要问题是您无法检测到 p-calendar 值的变化。如果您的代码如下=>

this.firstName.valueChanges.subscribe(value => {
         console.log('name has changed:', value)
       });

无效，那么您可以尝试 ngModelChange。下面是我针对 ngModelChange 和 valueChanges.subscribe=> 给出的解决方案
HTML

 <form [formGroup]="formGroup" >
    <p-calendar [formControl]="firstName"
      [(ngModel)]="startValue"
      (ngModelChange)="datachanged($event)"
      placeholder="MM-DD-YYYY">
    </p-calendar>
    </form>

TS

export class AppComponent {

    formGroup: FormGroup;
    firstName = new FormControl();
    constructor(formBuilder: FormBuilder) {
        
      this.firstName.valueChanges.subscribe(value => {
         console.log('name has changed:', value)
       });  
    }
   
  datachanged($event) {
    console.log("changed detected:"+$event);
  }

}

注意： 演示 link Stackblitz。请检查 link 并告诉我。

如何将 FormControl 与 p-calendar 一起使用并覆盖占位符

How to use FormControl with p-calendar and override placeholder

typescript

primeng

angular