Блог

Главная - Вопросы по программированию - Как получить значение ввода в Angular ( атрибут element.setAttribute(«[(ngModel)]», «Заголовок» не работает)

Как получить значение ввода в Angular ( атрибут element.setAttribute(«[(ngModel)]», «Заголовок» не работает)

#angular #typescript #input

Вопрос:

Я пытаюсь получить значение динамически создаваемого ввода по щелчку мыши

это и есть код :

 Save(form:NgForm){
  const element = document.createElement("input");
  element.setAttribute("type", "text")
  element.setAttribute("placeholder", "Title")
  element.setAttribute("name", "Title")
  element.setAttribute("[(ngModel)]", "Title")
  element.setAttribute("class","appearance-none block w-full bg-white text-gray-700  border border-gray-400 shadow-inner rounded-md py-3 px-4 leading-tight focus:outline-none focus:border-gray-500");
  document.getElementById("title").appendChild(element)  
}

Я попробовал этот атрибут setAttribute, но он не сработал

 element.setAttribute("[(ngModel)]", "Title")

в нем говорится: Не удалось выполнить «setAttribute» для «Элемента»: «[(ngModel)] » не является допустимым именем атрибута.

Ответ №1:

Я не уверен, что понимаю причину, по которой вы пытаетесь это сделать. Но если вы хотите не использовать какую-либо угловую емкость, что означает , что вы не используете html файл с красиво созданными <input> тегами, связанными переменной через [(ngModel)] , то вы не должны назначать [(ngModel)] , как вы это делаете.

Это означает, что следующее не работает, потому что это неизвестный атрибут из html input -тега.

 element.setAttribute("[(ngModel)]", "Title")

По этой причине вы должны установить значение следующим образом

 element.value = "Title";

Маленькие чаевые

Вот то, что вы пытаетесь заархивировать угловым способом
если не требуется, просто прокомментируйте, и я удалю это из своего ответа

 <!-- app.component.html -->
<input [(ngModel)]="title" type="text" placeholder="Title" name="Title" class="appearance-none block w-full bg-white text-gray-700  border border-gray-400 shadow-inner rounded-md py-3 px-4 leading-tight focus:outline-none focus:border-gray-500">
 
 // app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class YourComponent {
  title: string

  save() { 
    console.log(this.title)
  }
}

Комментарии:

1. Спасибо вам за ваш ответ! Я попробовал другой подход, и он сработал! Я попытался получить значение, нажав на другую кнопку, поэтому я установил другой идентификатор ссылки = «заголовок», и это сработало: Submit() { const Title = (<HTMLInputElement>document.getElementById («заголовок»)). значение; console.log(Заголовок) }

Ответ №2:

Угловой не работает таким образом, вы можете создать переменную (или массив переменных) и использовать в .html для создания входных данных. например

 //in .ts define an object
inputConfig={type:"text",
             placeholder:"Title",
             name:"Title",
             variable:"title",
             class="appearance-none ..."
};

//in .html
<input [type]="inputConfig.type" [placeholder]="inputConfig.placeholder"
       [name]="inputConfig.name" [ngClass]="inputConfig.class"
       [(ngModel)]="this[inputConfig.variable]">

Смотрите, как вы используете в [(ngModel)] this[inputConfig.variable]

дурак стакблитц

Чтобы получить переменную «заголовок», ее можно использовать только в .ts this.title или в .html title

Метки: ,