Angular: запретить пользователю печатать при вводе текста

Question

У меня есть текстовый ввод, который можно изменить с другого элемента управления, и пользователь может щелкнуть по нему, но я хочу запретить пользователю вводить значение для этого ввода. Я не хочу использовать атрибут disabled, потому что при нажатии на этот ввод запускается другое событие, и я хочу, чтобы пользователь мог выбрать и скопировать значение внутри. Как я могу предотвратить ввод в этом поле?

Answer 1

Вы можете использовать HTML атрибут только для чтения. Это логический атрибут, который используется для указания того, что текст, написанный во входной или текстовой области Element, доступен только для чтения. Это означает, что пользователь не может изменять или изменять содержимое, уже присутствующее в конкретном элементе (однако пользователь может вкладывать в него элементы, выделять его и копировать из него текст).

function myFun(){
  var a=document.getElementById("txt2").value;
  document.getElementById("txt1").value=a;
}

  Read only text box
  Textbox 1: 

  Enter your name
  Textbox 2: 

Надеюсь, это полезно для вас. :)

Answer 2

Вы можете сделать поле ввода только для чтения и добавить функцию щелчка, чтобы вызвать другую функцию.

<input type = "text" matInput id="first_name" formControlName="first_name" readonly (click) = "onChange()">

И в методе onChange (),

onChange() {
   console.log('this is the event');
}

Answer 3

Я не знаю всего случая, но вы можете использовать проверку формы с formGroup, которые не позволяют изменить значение, но все еще доступны для редактирования.

пример. html:

<div *ngIf="!name; else forminfo">
  <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)">
    <div class="form-container">
      <div class="row columns">
        <h1>My Reactive Form</h1>
        <label>Name
          <input type="text" formControlName="name">
        </label>
        <div class="alert" *ngIf="!rForm.controls['name'].valid && rForm.controls['name'].touched">{{ titleAlert }}</div>

        <label>Description
          <textarea  formControlName="description"></textarea>
        </label>
        <div class="alert" *ngIf="!rForm.controls['description'].valid && rForm.controls['description'].touched">You must specify a description that's between 30 and 500 characters.</div>

        <label for="validate">Minimum of 3 Characters</label>
        <input type="checkbox" name="validate" formControlName="validate" value="1"> On

        <input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid">
      </div>
    </div>
  </form>
</div>

<ng-template #forminfo>
  <div class="form-container">
    <div class="row columns">
      <h1>{{ name }}</h1>

      <p>{{ description }}</p>
    </div>
  </div>
</ng-template>

---

example.ts

import { AfterViewChecked, Component, OnChanges, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  rForm: FormGroup;
  post: any;                     // A property for our submitted form
  description: string = '';
  name: string = '';
  validate: boolean = false;
  titleAlert: string = 'This field is required';

  constructor(private fb: FormBuilder) {

    this.rForm = fb.group({
      'name' : [null, Validators.required],
      'description' : [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])],
      'validate' : ''
    });

  }
  addPost(post) {
    this.description = post.description;
    this.name = post.name;
  }
  ngOnInit() {
    this.rForm.get('validate').valueChanges.subscribe(

      (validate) => {
        console.log('check validate...');

        if (validate === true) {
          this.rForm.get('name').setValidators([Validators.required, Validators.minLength(3)]);
          this.titleAlert = 'You need to specify at least 3 characters';
        } else {
          this.rForm.get('name').setValidators(Validators.required);
        }
        this.rForm.get('name').updateValueAndValidity();

      });
  }
}