Edu Tell, o problema é o seguinte, quando vc obtém o dado da input, embora ela seja type="date", seu retorno é um string e não um Date (JavaScript Date), portanto os métodos getDate(), getMonth() e getFullYear() não existiram. De fato Não existem para o tipo string.
Minha sugestão é converter o dado recuperado da input para Date e depois fazer uso do método textoParaData (que na realidade poderia se chamar de formataData).
Eu tenho situação parecida em meus projetos aqui, e utilizo a lib moment para este tipo de conversão. O exemplo de código mostra uma input do tipo date e quando o usuário pressiona o botão um método é acionado para formatar a date:
Formulário (HTML):
<form [formGroup]="form" (ngSubmit)="showFormatedDate()">
<div>
<label for="data">Data</label>
<input type="date" id="data" class="form-control" [formControl]="form.controls['data']" autofocus/>
</div>
<button type="submit">Format</button>
<span>{{dataFormatada}}</span>
</form>
date-helper.ts:
export class DateHelper {
static textoParaData(date) {
return `${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`;
}
}
MyFormComponent.ts:
export class MyformComponent {
form: FormGroup;
dataFormatada: string;
constructor(private formBuilder: FormBuilder) {
this.createForm();
}
private createForm() {
this.form = this.formBuilder.group({
'data': ['']
});
}
showFormatedDate() {
const date = moment(this.form.get('data').value, 'YYYY-MM-DD').toDate();
this.dataFormatada = DateHelper.textoParaData(date);
}
}
Este exemplo está em Angular, mas se atente apenas ao HTML e o método showFormatedDate, é suficiente para entender.
Espero que tenha ajudado.